웹페이지에 도형을 그리는 방법 중 <svg> 태그를 사용하는 방법에 대하여 알아봅니다. 어떻게하면 svg를 사용해서 원, 사각형 등의 도형을 그릴 수 있을까요?



# 웹페이지에 svg태그 사용하는 방법도형을 그리기 위해서는 몇 가지 방법이 존재하며 svg를 사용하는 방법 외에도 캔버스 태그(canvas)에 자바스크립트로 그리는 방법이 있습니다. 또 다른 방법은 css를 사용하는 방법도 있습니다. 하지만 다각형이나 좀 더 높은 수준의 도형을 그리는 경우 svg가 많이 쓰이고 있습니다. 아래는 SVG를 사용하는 방법에 대하여 알아보고자 합니다.


! svg 다각형 그리는 방법아래는 다각형을 그리는 방법입니다. 다각형을 그리기 위해서 <polygon />을 사용하며 몇 가지 속성에 값을 설정할 수 있습니다. 아래 예제를 보세요.
<svg width="300" height="300">
  <polygon points="0,0 300,0 300,300 0,300" fill="black" stroke="red" stroke-width="10px" />
</svg>

fill
stroke
stroke-width
points  //  꼭지점의 위치를 x,y로 표시함



! svg 도형에 이미지 추가하는 방법defs를 사용하여 id값에 이미지를 저장하고 사용할 도형의 fill 프로퍼티를 사용하여 불러오는 방법입니다.
<svg width="300" height="300">
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 512 512">
      <image x="0%" y="0%" width="200" height="200" xlink:href="test.jpg"></image>
    </pattern>
  </defs>
  <polygon stroke="black" points="0,0 300,0 300,300 0,300" fill="url(#image)" />
</svg>

위 예제는 test.jpg를 <defs>를 사용해 정의하고 id값 test로 불러와 사용하였습니다.