WINGSBOX STORY: html5 SVG 공부하기

html5 SVG 공부하기

SVG. Scalable Vector Graphics 의 약자로 XML 을 기반으로 한 Drawing 표준을 이야기합니다.
SVG 는 HTML 5 가 논의되기 이전부터 사용되던 기술로 HTML 5 페이지 상에 선, 곡선, Path, 도형 등을 Vector 로 표현할 수 있다는 Canvas 와는 조금 다른 점이 있습니다.
Canvas 와는 다르게 Pixel 단위의 이미지밖에 표현할 수 없는 Web Page 에서 interactive 한 animation 이나 Vector graphic 을 SVG를 이용하여 표현할 수 있습니다. Silverlight 나 Flash 를 떠올려 보시면 좋겠죠...

SVG 가 표현할 수 있는 효과들을 간단히 살펴보면

기본 도형(예: 원, 다각형)
기타 image 형식 (예: PNG)
Bezier Pass, Curve
Text
Transparency
Transformation(회전, 기울이기, 확대/축소)
Gradient
Animation

뭐... Canvas 에서도 SVG 를 읽어 표현할 수있다고 하는데 직접 관련이 있는 것은 아닙니다.

그럼 Canvas 와 SVG 와의 차이점을 알아보도록 하죠.

	Canvas	SVG
이미지 처리방식	Bitmap	Vector
DOM	존재하지 않음(DOM Control 불가)	존재함(Script 로 Control 가능)
외부 이미지 편집	Bitmap image 편집 용이	Vector image 편집 용이
성능	높은 해상도의 이미지를 사용하면 성능 저하	이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하
Animation	Animation API 가 없으므로 Script 의 Timer 를 사용	높은 수준의 Animation 을 지원
Cross Browsing	모든 Web Browser 에서 지원하지 않음	모든 Browser 에서 지원되는 Drawing 표준
외부 이미지로 저장	jpg, png 등으로 저장 가능	불가
적합한 서비스	Graph 구현, Game	Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및 Application
적합하지 않은 서비스	Standalone Application UI	Game

이런 SVG 의 장점은 다음과 같은 것들을 들 수 있습니다.

접근성	image 를 접근 가능하게 만들기 위해 설계되었습니다.
파일크기	bitmap image 보다 작습니다.
크기 조절에도 깨지지 않음	Vector graphic 의 특징.
Script 조작 가능	JavaScript 와 DOM 으로 접근 가능.
Animation	SGV 언어 Core 자체에 animate 기능이 내장되어 있습니다.

19-1. 사용법과 예제XML 을 기반으로하기 때문에 기본적으로는 XHTML 에서만 사용할 수 있습니다만 HTML 상에서도 표현이 가능합니다.

SVG 문서는 SVG Element, SVG Attribute, CSS 로 구성됩니다.
SVG 는 XHTML 문서 자체에 인라인으로 들어가거나 별도의 SVG 파일로 작성된 후 object 나 img Element 로 HTML 이나 XHTML 문서와 링크되어 삽입됟 수 있는데 어느 방식이든 모든 SVG 의 Root Element 는 SVG 입니다.

SVG 를 Web Page 에 넣는 방법은 두가지가 있습니다.
1. SVG 파일을 img 나 Object Tag 에 삽입하는 방법.
2. Web Page 에 직접 삽입하는 방법.

먼저 Tag 에 SVG 파일을 삽입하는 방법입니다.

<!DOCTYPE html>
< head>
        <title>SVG Test</title>
        <meta charset="utf-8" />
< /head>
< body>
        <h2>HTML5 SVG Circle</h2>
        <img src="SVG_Test.svg" alt="Test SVG" />        <object type="image/svg+xml" data="SVG_Test.svg" width="300px" height="300px">
            <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
            <a href="http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
        </object>
< /body>
< /html>

SVG_Test.svg

이 방법의 특징은 모든 Web Browser 에서 지원을 하는 방법이라는 것입니다.
반면 아래의 직접 SVG를 입력하는 방법은 ie, chrome 을 제외한 Browser 는 지원하지 않습니다.

다음은 Web Page 에 직접 SVG 를 입력하는 방법입니다.

<!DOCTYPE html>
< head>
        <title>SVG Test</title>
        <meta charset="utf-8" />
< /head>
< body>
        <h2>HTML5 SVG Circle</h2>        <svg id="svgelem" height="600" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="150" cy="150" r="150" fill="cyan" />
            <rect id="redrect" x="100" y="100" width="300" height="100" fill="red" />
            <line x1="0" y1="0" x2="200" y2="400" style="stroke:blue;stroke-width:2"/>
            <ellipse cx="150" cy="350" rx="100" ry="50" fill="brown" />
            <polygon points="20,10 300,20, 170,50" fill="green" />
            <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="pink" />
            <defs>
                <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
                <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
                </radialGradient>
            </defs>
            <ellipse cx="200" cy="250" rx="100" ry="50" style="fill:url(#gradient) />
        </svg>
< /body>
< /html>

그럼 이번엔 Animation 기능을 넣어 볼까요?

<!DOCTYPE html>
< head>
        <title>SVG Test</title>
        <meta charset="utf-8" />
< /head>
< body>
        <h2>HTML5 SVG Animation Test</h2>
        <img src="SVG_Animate_Test.svg" alt="Test SVG" />
        <object type="image/svg+xml" data="SVG_Animate_Test.svg">
            <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
            <a href="http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
        </object>
< /body>
< /html>

SVG_Animate_Test.svg

(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS)

아래 Capture image 는 위 코드를 실행한 결과 입니다. Animation 기능이 동작하네요...(두 도형이 점차로 커졌다가 작아지는 것을 반복하는 예제입니다.)

위 SVG 코드들을 작성하다보니 초기 WPF 코드를 작성하는 기분이 들었습니다. 손으로 노가다 해가면서 돌려보고, 수정하고, 돌려보고...

그래서 SVG Editor 를 몇가지 찾아 보았습니다.

inkscape (http://inkscape.org/)

Sketsa SVG Editor (http://www.kiyut.com/products/sketsa/index.html)

SVGDeveloper (http://www.perfectsvg.com/)

제가 보기엔 SVGDeveloper 가 매력적이네요...
SVG 에 관심이 있으신 분들께서는 위 Editor 를 다운받아서 설치해보시고 테스트 해보셔도 좋을 듯합니다.

SVG 는 Silverlight 이나 Flash 같은 Vector Graphic 을 사용하는 플러그인을 사용하지않고도 HTML 만으로? Vector Graphic 을 구현할 수 있는 환경을 만들어 준다는 장점이 있습니다. 하지만 SVG 를 작성하고, SVG 요소들을 DOM 조작을 통해 화려하고 interactive 한 Web 을 구현할 수 있을 것입니다. 하지만 이런 DOM 을 통한 Control 은 Memory 소모가 심하고 성능문제를 유발할 수도 있을 것입니다. 더우기 Canvas 를 통해 구현할 수있는 것까지(단순 이미지 동적생성같은...) SVG 를 사용할 필요는 없을 것입니다. Canvas 와 SVG 간의 특징을 잘 알고 적재적소에 사용할수 있도록 많은 연구가 필요할 것입니다.

그럼 이만 SVG 에 대한 살펴보기를 마치겠습니다.

위의 내용들은
웹표준 가이드 HTML5 CSS3

앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API

WINGSBOX STORY

2013년 1월 22일 화요일

html5 SVG 공부하기

댓글 없음:

Korean Girl's Day

프로필