SVG 기본도형 그리기

 

SVG

• 스케일러블 벡터 그래픽스(SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식

 

• SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집과 수정이 쉽다는 장점이 있다.

 

• <svg> </svg> 안에 아래의 태그를 넣어줘야 한다.

 

사각형(Rectangles)

<rect />

x: 사각형의 좌측 상단의 x 값을 의미한다.

y: 사각형의 좌측 상단의 y 값을 의미한다.

width: 사각형의 폭을 나타낸다.

height: 사각형의 높이를 나타낸다.

rx: 사각형의 둥근 꼭짓점의 x 방향으로의 반지름을 나타낸다.

ry: 사각형의 둥근 꼭짓점의 y 방향으로의 반지름을 나타낸다.

ex)

<rect x="10" y="10" width="30" height="30"/> 

<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

 

원(Circle)

<circle />

r: 원의 반지름을 의미한다.

cx: 원의 중심 중 x 값을 의미한다.

cy: 원의 중심 중 y 값을 의미한다.

ex)

<circle cx="25" cy="75" r="20"/>

 

타원(Ellipse)

<ellipse />

rx: 타원의 x 방향으로의 반지름의 길이를 의미한다.

ry: 타원의 y 방향으로의 반지름의 길이를 의미한다.

cx: 타원의 중심 중 x 값을 의미한다.

cy: 타원의 중심 중 y 값을 의미한다.

ex)

<ellipse cx="75" cy="75" rx="20" ry="5"/>

 

선(Line)

<line />

x1: 점 1의 x 값이다.

y1: 점 1의 y 값이다.

x2: 점 2의 x 값이다.

y2: 점 2의 y 값이다.

ex)

<line x1="0" y1="0" x2="200" y2="200" style="stroke:black" />

 

Polyline

<polyline />

연결된 직선들의 그룹

모든 포인트가 하나의 속성에 포함된다.

points: 포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 와 y로 이루어져 있다. 예를 들어 (0, 0), (1, 1) 및 (2, 2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.

ex)

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
	style="fill:none;stroke:black;stroke-width:3" />

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"/>

 

다각형(Polygon)

<polygon />

polyline과 유사하지만 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선이 그어서 닫힌 모양을 만든다.

points: 포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 와 y로 이루어져 있다. (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.

ex)

<polygon points="20,20 40,25 60,40 80,120 120,140 200,180"
	style="fill:none;stroke:black;stroke-width:3" />

<polygon points="100,10 40,198 190,78 10,78 160,198"
	style="fill:yellow;stroke:black;stroke-width:1;fill-rule:nonzero;" />

 

Path

<path />

사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다.

ex)

<path d="M150 0 L75 200 L225 200 Z" />

 

 

 

 

 

---

 

참고

SVG 기본 도형 MDM

SVG tutorial W3C

SVG path