SVG: 기본 도형 그리기

>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=390&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=2

 

 

사각형 그리기

 

<rect>태그 안에 사각형의 위치와 크기를 지정합니다.

 

예) <rect x="10" y="10" width="100" height="100"/>
      x=가로 위치, y=세로 위치, width=너비, height=높이

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="10" y="10" width="100" height="50" style="fill:rgb(212,0,0); stroke:rgb(0,0,0); stroke-width:3;"/>
</svg>

SVG 보기 (rectangle.svg)

 

[참고] style 속성은 도형의 채우기/테두리의 색깔, 테두리 종류 및 두께 등을 표시합니다.
fill:rgb(212,0,0);이므로 사각형의 채우기 색깔은 붉은색 계열, stroke:rgb(0,0,0);이므로 사각형의 테두리 색깔은 검은색으로 표시되고 stroke-width:3;이므로 테두리 두께가 3픽셀로 표시됩니다.

 

 

둥근 사각형 그리기

 

<rect> 태그 안에 둥근 사각형의 위치, 크기, 둥근 정도를 지정합니다.

 

예) <rect x="20" y="20" rx="10" ry="10" width="100" height="100"/>
      x=가로 위치, y=세로 위치, rx=모서리 원호 길이, ry=모서리 원호 높이, width=너비, height=높이

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="10" y="10" width="100" height="50" rx="25" ry="25" style="fill:rgb(0,128,0); stroke:rgb(204,204,0); stroke-width:5;" />
</svg>

 

SVG 보기 (rounded_rectangle.svg)

 

 

원 그리기

 

<circle> 태그 안에 원의 중심점과 반지름 크기를 지정합니다.

 

예) <circle cx="15" cy="15" r="10"/>

      cx=중심점 가로 위치, cy=중심점 세로 위치, r=반지름 크기

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<circle cx="55" cy="55" r="45" style="fill:rgb(212,0,0); stroke:rgb(0,153,0); stroke-width:3; stroke-dasharray:6 6;" />
</svg>

 

SVG 보기 (circle.svg)

 

 

타원 그리기

<ellipse> 태그 안에 타원의 중심점과 x/y축 반경을 지정합니다.

 

예) <circle cx="15" cy="15" rx="10" ry="10"/>

      cx=중심점 가로 위치, cy=중심점 세로 위치, rx=x축 반경, ry=y축 반경

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<ellipse cx="60" cy="40" rx="55" ry="30" style="fill:rgb(255,255,102); stroke:rgb(102,153,102); stroke-width:2;" />
</svg>

 

SVG 보기 (ellipse.svg)

 

 

선 그리기

 

<line> 태그 안에 시작점과 끝점을 지정합니다.

 

예) <line x1="20" y1="20" x2="150" y2="150"/>

      x1=시작점 x좌표, y1=시작점 y좌표, x2=끝점 x좌표, y2=끝점 y좌표

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<line x1="20" y1="20" x2="100" y2="100" style="stroke:brown;stroke-width:3;"/>
</svg>

 

 

SVG 보기 (line.svg)

 

 

연결선 그리기

 

<polyline> 태그 안에 각 점의 좌표점을 지정합니다.

 

예) <polyline points="10, 30 10, 100 110, 100 110, 30"/>

      points=각 점의 좌표

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<polyline points="10, 30 10, 100 110, 100 110, 30" style="fill:white; stroke:black;stroke-width:2;"/>
</svg>

 

SVG 보기 (polyline.svg)

 

다각형 그리기

 

<polygon> 태그 안에 각 점의 좌표점을 지정합니다.

 

예) <polygon points="10, 20 10, 100 110, 100 110, 20"/>

      points=각 점의 좌표

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<polygon points="10, 20 10, 100 110, 100 110, 20" style="fill:yellow; stroke:black;stroke-width:2;"/>
</svg>

 

SVG 보기 (polygon.svg)