HTML5 - svg

svg 요소

svg 요소는 Scalavle Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 svg 요소는 도표나 그래프 등 벡터 기반의 다이어그램을 표현하는 데 매우 효과적입니다.

---

사각형 그리기

<h1>svg 요소를 이용한 사각형 그리기</h1>
	<svg width="200" height="150">
		<rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
		이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
	</svg>

 

svg 요소를 이용한 사각형 그리기

 

사각형을 그리는데 사용하는 rect 요소의 속성

- width : 도형의 너비를 설정

- height : 도형의 높이를 설정

- stroke : 도형의 테두리 색상을 설정

- stroke-width : 도형의 테두리 굵기를 설정

- fill : 도형을 채울 색상을 설정

- opacity : 도형의 투명도를 설정

 

위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, style 속성을 사용하여 한 번에 설정도 가능합니다.

	<h1>svg 요소를 이용한 사각형 그리기 style 속성 사용</h1>
	<svg width="200" height="150">
		<rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
		이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
	</svg>

 

svg 요소를 이용한 사각형 그리기 style 속성 사용

 

rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형 또한 그릴 수 있습니다.

 

	<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>

 

svg 요소를 이용한 모서리가 둥근 사각형 그리기

 

모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성

- x : 사각형의 왼쪽 위 꼭짓점의 x좌표

- y : 사각형의 왼쪽 위 꼭짓점의 y좌표

- rx : 사각형 모서리 굴곡의 x축 반지름

- ry : 사각형 모서리 굴곡의 y축 반지름

---

선 그리기

<h1>svg 요소를 이용한 선 그리기</h1>
	<svg width="250" height="200">
		<line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
		이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
	</svg>

 

svg 요소를 이용한 선 그리기

선을 그리는데 사용하는 line 요소의 속성

- x1 : 선이 시작될 위치의 x 좌표

- y1 : 선이 시작될 위치의 y 좌표

- x2 : 선이 끝나는 위치의 x 좌표

- y2 : 선이 끝나는 위치의 y 좌표

 

---

원 그리기

<h1>svg 요소를 이용한 원 그리기</h1>
	<svg width="300" height="300">
		<circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
		이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
	</svg>

 

svg 요소를 이용한 원 그리기

원을 그리는데 사용하는 circle 요소의 속성

- cx : 원의 중심 x 좌표

- cy : 원의 중심 y 좌표

- r : 원의 반지름

---

타원 그리기

<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>

 

svg 요소를 이용한 타원 그리기

타원을 그리는데 사용한 ellipse 요소의 속성

- cx : 타원 중심의 x좌표

- cy : 타원 중심의 y 좌표

- rx : 타원의 x축 반지름

- ry : 타원의 y축 반지름

---

다각형 그리기

<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>

 

svg 요소를 이용한 다각형 그리기

다각형을 그리는데 사용하는 polygon 요소의 속성

- points : 다각형의 각 꼭짓점이 표시될 위치의 좌표를 설정

 

[출처] TCPSchool.com