smarti,스마트아이

HTML5 그래픽2

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

 

Canvas vs SVG

canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다.
어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다.

작업 환경에 따른 선택의 기준

다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다.
렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다.
따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다.
Canvas와 SVG간의 성능 비교Canvas와 SVG간의 성능 비교
 - canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다.
 - svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k)에 좋다.
따라서 각 작업 환경에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋다.

작업 종류에 따른 선택의 기준

다음 그림은 canvas 요소와 svg 요소를 사용할 때 선택의 기준을 제시해준다.

 - canvas 요소는 복잡하고 고성능의 애니메이션(animation) 작업이나 동영상 조작 등의 작업에 잘 어울린다.
 - svg 요소는 고품질의 문서 작업이나 정적 이미지의 조작 작업 등에 잘 어울린다.
따라서 각 작업 종류에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋다.

Canvas와 SVG의 차이점

Canvas	SVG
픽셀(pixel) 기반	모양(shape) 기반
단일 HTML 요소	DOM의 일부분이 되는 다중 그래픽 요소
스크립트(script)를 통해서만 수정할 수 있음.	스크립트(script) 및 CSS를 통해서도 수정할 수 있음.
그래픽이 주작업인 게임에 적합함.	렌더링 영역이 넓은 응용 프로그램(application)에 적합함.

 

[세상살이] - 성공과 실패는 습관이 좌우한다

성공과 실패는 습관이 좌우한다

[세상살이] - 네이버 스마트렌즈로 사진 찍어서 번역하기

네이버 스마트렌즈로 사진 찍어서 번역하기

[디자인공부] - 포토샵으로 청바지 천 효과 문자 만들기

포토샵으로 청바지 천 효과 문자 만들기

[세상살이] - 디데이계산기, The Day Before 앱 휴대폰에 설치하기

디데이계산기, The Day Before 앱 휴대폰에 설치하기

[코딩공부] - MySQL 8.0.21 다운로드 및 설치하기, 윈도우10

MySQL 8.0.21 다운로드 및 설치하기, 윈도우10