HTML에 SVG를 추가하는 방법

SVG란?

Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽을 말한다. XML 문법을 기본으로 하며 로고, 아이콘, 그래프 등에 널리 사용하는 이미지이다. 특징으로는 크기를 줄이거나 늘려도 화질에 영향을 미치지 않으며 색상 또한 자유롭게 지정할 수 있다.

img

<img
  src="equilateral.svg"
  alt="triangle with all three sides equal"
  height="87"
  width="100"
/>

svg를 삽입하기 위하여 img 태그의 src로 참조하는 방법. 해당 svg가 width나 height를 가지고 있지 않다면 height, width 값을 넣어주어야 한다.

장점

1. 빠르고 친숙한 Img 태그를 사용할 수 있다.
2. 태그 안에 태그를 넣는 방식을 통하여 쉽게 하이퍼링크를 걸 수 있다.
3. 브라우저 캐쉬를 사용하여 빠르게 로드할 수 있다.

단점

1. 해당 이미지를 JS를 통해 컨트롤할 수 없다.
2. css로 svg를 컨트롤하려면 svg 내부 코드에 css 스타일을 넣어야 한다. 외부 css코드로 svg를 제어할 수 없다.
3. css 의사클래스를 통해 이미지의 스타일을 재설정 할 수 없다.

크로우브라우징 문제

SVG를 지원하지 않는 브라우저가 있다. 그래서 src에는 png, srcset에 svg경로를 입력해두면 svg를 지원할 경우 svg를 불러오고 지원하지 않으면 png파일을 불러오도록 할 수 있다.

<img
  src="equilateral.png"
  alt="triangle with equal sides"
  srcset="equilateral.svg"
/>

아래와 같이 css background를 통해 svg를 불러올 수 있다. 이 경우 최신 브라우저는 svg를 로드하고 svg를 지원하지 않는 브라우저는 png 파일을 로드한다.

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

하지만 위 방식으로 SVG를 불러오면 css로 직접 제어할 수 없다.

svg

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>

SVG Inline, inlining SVG이라고 불리는 기법. 태그를 직접 삽입한다.

장점

1. HTTP 요청 횟수를 줄여 로딩이 약간 더 빠르다.
2. class나 id를 지정할 수 있고 css를 직접 설정하여 스타일을 줄 수 있다.
3. css 의사클래스나 css 애니메이션을 먹일 수 있는 유일한 방법이다.
4. 태그를 통하여 쉽게 하이퍼링크를 먹일 수 있다.

단점

1. SVG를 한곳에서만 사용하는 경우에만 유용하다.
2. SVG가 HTML에 포함되므로 HTML 용량을 늘린다.
3. 브라우저는 이미지는 캐쉬하지만 inline SVG를 캐싱할 수 없다.
4. 를 사용하여 fallback에 대비할 수 있지만 브라우저가 SVG를 지원하더라도 fallback을 다운로드 한다.

object

<object type="image/svg+xml" data="./svg-file.svg" aria-label="설명"></object>

오브젝트 요소를 사용하여 추가할 수 있다. data 속성을 사용하여 파일 경로를 입력하여 띄울 수 있고 aria-label 속성을 사용하여 대체 텍스트를 입력할 수 있다.

해당 기능은 캐싱은 할 수 있지만 외부 CSS를 사용할 수 없다. 즉 object 파일에 대한 스타일링은 가능하지만 내부 svg 코드를 조작할 수는 없다.

embed

<embed src="svg-file.svg" type="image/svg+xml" aria-label="설명">

를 사용하여 HTML에 svg를 추가할 수 있다. src 속성에 파일 경로를 입력하여 파일을 불러오고 aria-label 속성을 사용하여 대체 텍스트를 입력할 수 있다.

iframe

<iframe src="triangle.svg" width="500" height="500" sandbox>
  <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>