# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/html+svg.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.