안녕하셔요? 이번엔 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 기능이 내장되어 있습니다. |
18-1. 사용법과 예제
XML 을 기반으로하기 때문에 기본적으로는 XHTML 에서만 사용할 수 있습니다만 HTML 상에서도 표현이 가능합니다.
SVG 문서는 SVG Element, SVG Attribute, CSS 로 구성됩니다.
SVG 는 XHTML 문서 자체에 인라인으로 들어가거나 별도의 SVG 파일로 작성된 후 object 나 img Element 로 HTML 이나 XHTML 문서와 링크되어 삽입됟 수 있는데 어느 방식이든 모든 SVG 의 Root Element 는 SVG 입니다.
<svg xmlns="http://www.w3.org/2000/svg">...</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
<svg id="svgelem" height="300" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="150" cy="150" r="150" fill="cyan" />
<line x1="0" y1="0" x2="300" y2="300" style="stroke:blue;stroke-width:2"/>
<line x1="0" y1="300" x2="300" y2="0" style="stroke:blue;stroke-width:2"/>
</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
<svg id="svgelem" height="600" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1px;stroke:rgb(0,0,0)">
<animate attributeName="stroke-width" values="1px;50px;1px;" dur="2s" repeatCount="indefinite" />
</rect>
<ellipse stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%">
<animate attributeName="rx" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
<animate attributeName="ry" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
</ellipse>
</svg>
아래 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
을 참고 하였습니다.
행복한 고수되십시요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
