웹문서에 SVG 태그 사용하는 방법 및 예제보기

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

# 웹페이지에 svg태그 사용하는 방법

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

! svg 다각형 그리는 방법

아래는 다각형을 그리는 방법입니다. 다각형을 그리기 위해서 <polygon />을 사용하며 몇 가지 속성에 값을 설정할 수 있습니다. 아래 예제를 보세요.

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

! svg 도형에 이미지 추가하는 방법

defs를 사용하여 id값에 이미지를 저장하고 사용할 도형의 fill 프로퍼티를 사용하여 불러오는 방법입니다.

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