HTML 입문 | HTML5 그래픽 | SVG(Scalable Vector Graphics)

svg 요소

svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다.
기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다.

하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.
따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다.

svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie chrome firefox safari opera
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좌표를 명시한다.
이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 된다.