[HTML] SVG안에 이미지 넣기

 

SVG 안에 이미지 넣기

흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 <img> 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 <img> 태그를 사용할 수 없습니다.

 

 

SVG 태그 안에 이미지를 넣는 방법은 <image> 태그를 사용하는 것입니다.

 

<image> 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다.

사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다.

 

 

• x : 이미지의 x축 좌표 위치 지정
• y : 이미지의 y축 좌표 위치 지정
• width : 이미지의 너비
• height : 이미지의 높이
• href : 이미지 파일의 URL을 가리킵니다.
• PreservAspectRatio : 이미지의 크기 배율 조정.

코드

<img> 태그에서는 src 속성을 사용하여 이미지를 불러오지만 <image> 태그에서는 href 속성을 사용합니다.

 

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="svg_image.png" height="200" width="200"/>
</svg>

 

참고자료

<이미지> - SVG: 확장 가능한 벡터 그래픽 | MDN (mozilla.org)

<image> - SVG: Scalable Vector Graphics | MDN