SVG :: 기본 도형

SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조하여 작성하였다.

https://www.w3.org/TR/SVG : W3C SVG spec 

http://tutorials.jenkov.com/svg/index.html : SVG tutorial by Jenkov

이번 페이지에서는 SVG의 기본도형에 대해서 정리하였다. 기본 도형에 대한 내용은 element에 대해 이런것이 있구나 라는 것을 알기위한 목적으로 간단히 정리하고 후에 나오는 path 등을 좀더 자세히 다룰 예정이다.

---

기본도형의 종류

spec 에 정의된 기본도형에 대한 내용이다. 도형의 이름과 그에 대한 element가 나타나있다. 사각형, 원, 타원, 선, 꺾은선, 다각형 이 있다. 각각의 spec은 각 element 를 click!!

SVG contains the following set of basic shape elements:

• rectangles (including optional rounded corners), created with the <rect> element,

• circles, created with the <circle> element,

• ellipses, created with the <ellipse> element,

• straight lines, created with the <line> element,

• polylines, created with the <polyline> element, and

• polygons, created with the <polygon> element.

기본도형의 element attribute로 stroke 와 fill 을 많이 사용하게 되는데 이는 기본도형에 대한 종류를 설명한 뒤 다음 페이지에서 다룰 예정이므로 아래 예제에서 stroke와 fill attribute 가 등장하여도 그냥 넘어가 주시길 바랍니다.