HTML 그래픽 - SVG (Scalable Vector Graphics)
SVG
svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다.
기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다.
하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다.
따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다.
사각형 그리기
다음 예제는 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 | 도형의 투명도를 설정함 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 사각형 그리기</h1>
<svg width="200" height="150">
<rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있습니다.
| 속성 | 설명 |
| x | 사각형의 왼쪽 위 꼭짓점의 x좌표를 설정함. |
| y | 사각형의 왼쪽 위 꼭짓점의 y좌표를 설정함. |
| rx | 사각형 모서리 굴곡의 x축 반지름을 설정함. |
| ry | 사각형 모서리 굴곡의 y축 반지름을 설정함. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 모서리가 둥근 사각형 그리기</h1>
<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 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
선 그리기
다음 예제는 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좌표를 설정함. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 선 그리기</h1>
<svg width="250" height="200">
<line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
원 그리기
다음 예제는 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 | 원의 반지름을 설정함. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 원 그리기</h1>
<svg width="300" height="300">
<circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
타원 그리기
다음 예제는 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축 반지름을 설정함. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 타원 그리기</h1>
<svg width="300" height="300">
<ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
다각형 그리기
다음 예제는 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좌표를 명시합니다.
이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Multimedia SVG</title>
</head>
<body>
<h1>svg 요소를 이용한 다각형 그리기</h1>
<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 요소를 지원하지 않을 때 나타납니다!
</svg>
</body>
</html>
[출처] TCPSCHOOL.com
'IT > Web' 카테고리의 다른 글
| CSS 기초 (0) | 2020.02.12 |
|---|---|
| HTML 그래픽 - Canvas VS SVG (0) | 2020.02.11 |
| HTML 그래픽 - Canvas (0) | 2020.02.04 |
| HTML 멀티미디어 (0) | 2020.02.04 |
| HTML5 에서 추가된 input 요소의 타입 및 속성 (0) | 2020.02.04 |
댓글