HTML 그래픽 – 이미지

SVG <image>

SVG 이미지 – <image>

<image> 요소는 SVG에 이미지를 삽입하는 데 사용한다.

SVG 소프트웨어는 JPEG, PNG 및 다른 SVG 파일을 지원해야 한다.

<image> 요소는 이미지의 위치와 모양을 지정하는 몇 가지 기본 속성을 가진다.

이미지 삽입

여기서는 SVG 안에 .jpg 이미지를 삽입한다.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<image height="200" width="300" href="pulpitrock.jpg" />

</svg>

코드 설명:

• height 속성은 이미지의 높이를 정의한다.
• width 속성은 이미지의 너비를 정의한다.
• href 속성은 이미지의 URL을 정의한다.

그래픽 추가

여기서는 파란색 원 위에 이미지를 표시하고, 이미지 아래에 텍스트를 추가한다.

<svg height="250" width="300" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<circle r="105" cx="150" cy="120" fill="lightblue" />

<image x="0" y="60" width="300" height="100" href="pulpitrock.jpg" />

<text x="84" y="180" fill="black">Pulpit Rock, Norway</text>

</svg>