SVG

svg

svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다.

기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다.

하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다.

따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다.

사각형 그리기

다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다.

사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다.

선그리기

다음 예제는 line 요소를 사용하여 사각형을 그리는 예제입니다.

선을 그리는데 사용하는 line 요소의 속성은 다음과 같습니다.

원그리기

다음 예제는 circle 요소를 사용하여 사각형을 그리는 예제입니다.

원을 그리는데 사용하는 circle 요소의 속성은 다음과 같습니다.

타원 그리기

다음 예제는 ellipse 요소를 사용하여 사각형을 그리는 예제입니다.

타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같습니다.

다각형 그리기

다음 예제는 polygon 요소를 사용하여 사각형을 그리는 예제입니다.

다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같습니다.

points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시합니다.

이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 됩니다.