> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/html+svg.md).

# HTML 문서에 SVG 포함하기

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

* `<img>`
* `<embed>`
* `<object>`
* `<iframe>`
* `<svg>`

### 이미지(Image)

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

{% code title="HTML" %}

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

{% endcode %}

### 임베드(embed)

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

{% code title="HTML" %}

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

{% endcode %}

### 오브젝트(object)

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

{% code title="HTML" %}

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

{% endcode %}

### 아이프레임(iframe)

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

{% tabs %}
{% tab title="HTML" %}

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

{% endtab %}

{% tab title="CSS" %}

```css
iframe { border: none; }
```

{% endtab %}
{% endtabs %}

### 인라인 SVG

아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 `<iframe>` 요소의 `src` 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 [SVG 접근성](https://a11y.gitbook.io/graphics-aria/~/edit/primary/svg-graphics/svg-a11y)을 고려하여 콘텐츠를 제공해야 합니다.

{% code title="HTML" %}

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

{% endcode %}

### \<svg> 요소

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

```markup
<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를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다.

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

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

{% code title="SVG 파일" %}

```markup
<!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>
```

{% endcode %}
{% endhint %}