웹에서의 그래픽 다루기 (2편 : HTML5 SVG 도형)



웹에서의 그래픽 다루기 (2편 : HTML5 SVG 도형)


안녕하세요! CX 사업부의 왓썹입니다ㅎㅎ

오늘은 웹에서의 그래픽 다루기(1:HTML5 SVG 소개) 편에 이어서 포스팅을 이어 나가도록 하겠습니다.

 

1편에서 SVG 소개를 간단히 하였기 때문에 더 이상의 설명은 하지 않고 바로 SVG의 간단한 사용법부터 알아보도록 하겠습니다.

 

코드 작성은 webPonent-Publisher 라는 웹포넌트에서 제공하는 편집 툴을 이용해서 작성 할 거에요. 작성된 코드가 실시간으로 적용되어 결과를 바로 바로 확인 할 수 있어서 사용 편의성이 좋기 때문에 자주 사용하는 툴입니다.

 

SVG에서 제공하는 기본 도형은 line, rect, circle, ellipse, text, image, polyline, polygon, path, use 이 있습니다. 그중에서 몇 가지만 예제로 살펴보겠습니다.


1. SVG Circle 



2. SVG Rectangle



3. SVG Rounded Rectangle



4. SVG Star



5. SVG Text



예제를 통해서 정말 간단하게 SVG의 도형들을 구현해 보았는데요.

SVGSVG Element SVG Attribute, CSS 로 구성이 되어있으며, 모든 SVG Element Root Element SVG 안에 포함이 되어있어야 합니다.


SVG를 작성할 때 각각의 속성들을 통해서 도형의 세부 모양을 조절 할 수 있다는 것을 알 수 있는데요. 기본속성으로 아래와 같은 속성이 있습니다.


stroke : 선 색상

stroke-width : 선 두께

fill : 채우기 색상

width : 넓이

height : 높이


주의할 점으로 도형의 좌표는 Element 마다 조금씩 차이가 있습니다. 기본적으로 x, y 축을 기준으로 설정을 하지만 circle element 에서는 원의 중심 좌표를 cx, cy 속성으로 표현하고, line element 에서는 시작점과 끝점을 나타내는 x1, y1, x2, y2 로 표현합니다.


좀 더 자세히 알고 싶으신 분은 http://www.w3schools.com/svg/default.asp 에서 확인해 보세요.


아래는 웹포넌트 차트의 PIE 차트 입니다. 애니메이션과 hover 등 다양한 효과를 표현하고 있죠.


chart by

 


차근차근 열심히 하시다 보면 언젠가는 이렇게 화려한 애니메이션과 다양한 효과가 추가된 차트 등의 결과물을 만들어 낼 수 있지 않을까 생각됩니다.^^ 굳이 시간 낭비하기 싫으신 분은 저렴한 가격의 훌륭한 국내 제품도 있으니 사용해보시는 것도 좋을 것 같습니다.


전에도 말씀드렸다시피 안타깝게도 SVGIE9 버전 까지만 지원합니다. 위의 예제들을 가지고 IE8 이하 버전에서 실행한다면 당연히 안되겠죠.. 따라서 웹접근성을 준수하기 위해서는 다른 방법이 필요합니다.


 webPonent Chart SVG를 사용함에도 웹접근성을 아주 잘 지키죠. 그 비결은 Raphael.js입니다. Raphael.js 에서는 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ 을 지원한다고 명시가 되어있습니다. 특히 IE 에서는 VML 로 변환해 주기 때문에 IE8 이하 버전에서도 문제없이 표현이 가능합니다.


사실 가장 다루고 싶었던 부분이 바로 Raphael.js입니다. 정말 유용한 javascript 라이브러리인데요. 다음 편에서는 Raphael.js 의 장점, 사용법 등에 대해서 살펴 볼 예정입니다.





New Multi-Channel Dynamic CMS