웹에 벡터 이미지 넣기 <svg>

래스터 이미지

각각의 픽셀이 나타내야 할 색에 대한 정보를  가짐

이미지 크기 고정 -> 확대시 화질 저하

벡터 이미지

벡터 정보를 통해 그때 그때 알고리즘을 계산, 알맞게 이미지를 렌더링

이미지 크기 가변적 -> 확대시 화질 저하 없음

단점

• 특정 복잡한 이미지 벡터로 구현하기 어려움
• 이미지가 복잡해지면 벡터가 매우 많아짐 -> 파일 크기 증가, 렌더링 시간 증가

svg를 추가하는 방법

1. <img> 요소 

<img
    src="image.svg"
    alt="image description"
    width="100"
    height="100"/>

장점

• alt 사용 가능
• <a>를 통한 하이퍼 링크 가능
• 브라우저에서 캐시 가능

단점

• js로 조작 불가능
• 외부 스타일시트로 css 불가능
• css 의사 클래스 불가능

 

2. <svg> 요소

<svg
    width="100"
    height="100">
    <rect width="100" height="100" fill="red"/>
</svg>

장점

• css 스타일, 상호작용, 애니메이션 가능
• <a>를 통한 하이퍼 링크 가능

단점

• SVG를 한 곳에서만 사용하는 경우에만 적합
• SVG 코드가 늘수록 HTML 파일 크기가 커짐
• 브라우저 캐시 불가능
• 대체 콘텐츠(<foreignObject>)를 포함했을 때 지원하는 브라우저에서도 다운로드됨

 

3. <iframe> 요소

단점

• 브라우저가 iframe을 지원하지 않을 때만 대체 콘텐츠를 표시
• same origin이 아니면 js를 통한 svg 조작 불가능