HTML 문서에 SVG 포함하기

SVG를 HTML 문서에 포함하는 기본 방법을 소개합니다.

SVG 코드는 다음의 HTML 요소를 사용해 문서에서 활용할 수 있습니다.

• <img>

• <embed>

• <object>

• <iframe>

• <svg>

이미지(Image)

SVG 파일(*.svg)을 HTML 문서에서 사용하는 가장 손쉬운 방법은 <img> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지가 의미를 포함한 경우 적절한 대체 텍스트를 제공합니다.

HTML

<img src="king.svg" alt="킹 (체스 말)">

임베드(embed)

임베드 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <embed> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.

HTML

<embed src="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)">

오브젝트(object)

오브젝트 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <object> 요소의 data 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.

HTML

<object data="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)"></object>

아이프레임(iframe)

아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.

HTML

<iframe src="king.svg" aria-label="킹 (체스 말)"></iframe>

CSS

iframe { border: none; }

인라인 SVG

아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 SVG 접근성을 고려하여 콘텐츠를 제공해야 합니다.

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- king.svg 코드 -->
</svg>

<svg> 요소

<svg> 요소는 인라인 SVG의 시작입니다. svg 요소에 추가 할 수 있는 속성은 다양합니다. 일반적으로 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다.

<svg 
  version="1.1"
  xmlns=http://www.w3.org/2000/svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="520" height="520"
  viewBox="0 0 520 520">
  ...
</svg>

하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다.

• version

• xmlns

• xmlns:xlink

그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다.

<svg width="520" height="520" viewBox="0 0 520 520">
  ...
</svg>

NOTE. Adobe Illustrator에서 SVG 코드로 내보내면 아래와 같이 코드가 복잡합니다. 불필요한 속성은 제거해 코드를 정리하세요. (DTD, version, xmlns, xmlns:xlink, xml:space)

SVG 파일

<!DOCTYPE svg PUBLIC 
  "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 
  version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xml:space="preserve">
  ...
</svg>