..

Search

39) SVG

SVG


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좌표를 명시합니다.

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


연습문제