웹에서의 그래픽 다루기 (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의 도형들을 구현해 보았는데요.

SVG는 SVG 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

 

http://www.webponent.com/main/webponentChart/index 

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

전에도 말씀드렸다시피 안타깝게도 SVG는 IE9 버전 까지만 지원합니다. 위의 예제들을 가지고 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 의 장점, 사용법 등에 대해서 살펴 볼 예정입니다.