구현 옵션

웹에서 SVG를 사용하는 방법은 다양합니다. 일부는 유용하지만 피해야 할 것도 있습니다. 해상도 독립성 및 파일 용량의 최소화를 위해서는, SVG를 일반 이미지 형식과 같이 <img>로 참조하거나, CSS에서 background-image로 참조합니다.


Img

일반 이미지와 같이 <picture> 요소에서 SVG를 사용할 수 있습니다. 이 메서드는 조작 기능을 제한합니다.

<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">

Breaking Borders Logo


Background-image

base64 인코딩을 하면 다운로드하는 동안 나머지 스타일 로딩을 차단시키기 때문에 사용하지 않는 편이 좋습니다. 이 메서드는 조작 기능을 제한합니다.

.logo {
  background-image: url(bblogo.svg);
}

Breaking Borders Logo


Iframe

<iframe>요소 내 SVG를 로드할 수 있습니다. 대부분의 작업을 구현할 수 있지만, 더 발전적인 기능을 사용하고자 한다면 가장 좋은 방법은 아닙니다. ¯\_(ツ)_/¯

<iframe src="bblogo.svg">Your browser does not support iframes</iframe>

Breaking Borders Logo


Embed

<embed>요소는 '외부 응용 프로그램', '대화형 콘텐츠'를 통합할 때 사용됩니다. SVG를 사용할 수 있겠으나, 사용하지 않는 편이 낫습니다.

<embed type="image/svg+xml" src="bblogo.svg" />

Breaking Borders Logo


Object

<object>요소는 HTMLHTML문서 내에 직접 내장(inline)시키지 않고 SVG를 조작하는 경우에 가장 좋은 방법입니다.

<object type="image/svg+xml" data="bblogo.svg">현재 브라우저는 iframe을 지원하지 않습니다.</object>

Breaking Borders Logo


Inline

SVG 코드를 인라인하면 HTTP 요청은 저장되지만, 이미지는 브라우저에 캐시되지 않습니다. 조작이 가장 쉬운 방법이지만, 인라인 SVG 코드를 유지하는 것은 어려울 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

Breaking Borders Logo


결론

SVG를 최대한 활용하려면 <object>을 사용하세요. 또는 HTTP 요청을 저장하기 위해 인라인으로 사용할 수 있지만 이미지는 캐시되지 않는 문제가 있습니다. 이미지처럼 동일하게 SVG를 사용하려면 <img>또는 background-image를 사용하세요. <iframe> 및 <embed>를 사용할 수 있겠으나 가장 좋은 방법은 아니므로 더 이상 설명은 하지 않겠습니다.

Object Inline Img Background-image
CSS 조작 가능 가능 일부 inline 일부 inline
JS 조작 가능 가능 불가능 불가능
SVG 조작 가능 가능 가능 가능
인터렉티브 SVG 애니메이션 가능 가능 불가능 불가능



'일부 inline'는 CSS <style>이 SVG 코드에 포함 된 경우에 한하여 작동합니다. 자세한 내용은 다음 부분을 참고하세요.