SVG
svg 요소
svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다.
기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다.
하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다.
따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다.
svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
| 요소 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| svg | 9.0 | 4.0 | 3.0 | 3.2 | 10.1 |
사각형 그리기
다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다.
예제
<svg width="200" height="150">
<rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| width | 도형의 너비를 설정함. |
| height | 도형의 높이를 설정함. |
| stroke | 도형의 테두리 색상을 설정함. |
| stroke-width | 도형의 테두리 굵기를 설정함. |
| fill | 도형을 채울 색상을 설정함. |
| opacity | 도형의 투명도를 설정함. |
위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, 다음 예제와 같이 style 속성을 사용하여 한 번에 설정할 수도 있습니다.
예제
<svg width="200" height="150">
<rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>
rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있습니다.
예제
<svg width="250" height="200">
<rect width="200" height="150" x="20" y="20" rx="20" ry="20"
stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| x | 사각형의 왼쪽 위 꼭짓점의 x좌표를 설정함. |
| y | 사각형의 왼쪽 위 꼭짓점의 y좌표를 설정함. |
| rx | 사각형 모서리 굴곡의 x축 반지름을 설정함. |
| ry | 사각형 모서리 굴곡의 y축 반지름을 설정함. |
선 그리기
다음 예제는 line 요소를 사용하여 선을 그리는 예제입니다.
예제
<svg width="250" height="200">
<line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
</svg>
선을 그리는데 사용하는 line 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| x1 | 선이 시작될 위치의 x좌표를 설정함. |
| y1 | 선이 시작될 위치의 y좌표를 설정함. |
| x2 | 선이 끝나는 위치의 x좌표를 설정함. |
| y2 | 선이 끝나는 위치의 y좌표를 설정함. |
원 그리기
다음 예제는 circle 요소를 사용하여 원을 그리는 예제입니다.
예제
<svg width="300" height="300">
<circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
원을 그리는데 사용하는 circle 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| cx | 원의 중심 x좌표를 설정함. |
| cy | 원의 중심 y좌표를 설정함. |
| r | 원의 반지름을 설정함. |
타원 그리기
다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제입니다.
예제
<svg width="300" height="300">
<ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| cx | 타원 중심의 x좌표를 설정함. |
| cy | 타원 중심의 y좌표를 설정함. |
| rx | 타원의 x축 반지름을 설정함. |
| ry | 타원의 y축 반지름을 설정함. |
다각형 그리기
다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제입니다.
예제
<svg width="300" height="300">
<polygon points="10,100 190,100 30,200 100,40 170,200"
stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| points | 다각형의 각 꼭짓점이 표시될 위치의 좌표를 설정함. |
points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시합니다.
이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 됩니다.
