SVG 이미지

<image> 요소

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

<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 요소 내부에 포함된 비트맵 이미지

주의사항

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

• x 또는 y 속성을 설정하지 않으면 0이 됩니다.

• height 또는 width 속성을 설정하지 않으면, 0이 됩니다.

• height 또는 width 속성이 0이면 이미지는 표시되지 않습니다.