> 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/svg-images.md).

# SVG 이미지

### \<image> 요소

SVG 요소 내부에 [비트맵 이미지](https://unsplash.com/photos/WvXQH53U_t8)를 포함하고자 한다면 `<image>` 요소를 사용합니다. HTML `<img>` 요소와 사용법은 유사합니다. 하지만 `xlink:href`, `x`, `y` 속성을 제공하는 반면 `alt` 속성은 제공하지 않습니다. 왜? `alt` 속성을 제공하지 않는지 모르겠지만, 다행히 대체 텍스트는 WAI-ARIA `aria-label` 속성을 사용해 제공할 수 있습니다.

```markup
<svg width="600" height="300">
  <image 
    xlink:href="https://images.unsplash.com/photo-1523960909462-292b75d8ab2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5db68bd70a4783ce3917d48810c45c40&auto=format&fit=crop&w=400&q=60"
    x="105"
    y="15"
    width="400"
    height="267"
    aria-label="동양의 고성 기와 지붕" />
</svg>
```

![SVG 요소 내부에 포함된 비트맵 이미지](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LEPf5DStv-t1eaHBiLr%2F-LEPpGIDz9-zVJ5hz5y_%2Fimage.png?alt=media\&token=1efbca5f-e41e-4e6c-9032-0e0ab1b3ca4c)

### &#x20;주의사항

SVG 요소 내부에 `<image>` 요소를 사용할 때 다음의 특성에 주의하여 사용하여야 합니다.

* `x` 또는 `y` 속성을 설정하지 않으면 `0`이 됩니다.
* `height` 또는 `width` 속성을 설정하지 않으면, `0`이 됩니다.
* `height` 또는 `width` 속성이 `0`이면 이미지는 표시되지 않습니다.