SVG는 Scalable Vector Graphics의 약자로 D3.js로 인해 급부상고있는 기술이며, 파일형태(*.svg)나 XML언어로 구현할 수 있습니다.
많은 개발자들이 Canvas와 svg중 어떤것을 배워야할지 고민하는데, svg나 canvas의 활용성을 극대화 하기 위해서는
두가지 기술 다 습득하는게 최선입니다.
그럼 svg에 장점에 대해 알아보겠습니다.
1. XML 언어이기 때문에 HTML,javascript에 익숙한 웹개발자가 학습하기 좋습니다.
2. 벡터 기반이기 때문에 크기조절로 인한 화질 저하 걱정이 없고 그로인해 반응형 웹에 유용합니다.
3. IE9까지 크로스브라우징을 지원합니다.
4. 파일형태로 했을때 용량이 작습니다.
그럼 svg를 간단하게 시작해보겠습니다.
(이런거 만들거면 div로 하면되지않냐..하시겠지만.. 기초입니다 ㅠ)
일단 시작은 svg라는 태그로 시작합니다. HTML로 치면 BODY같은 느낌이죠.
rect는 사각형을 그릴때 사용되는 태그입니다. x는 x축 좌표값, y는 y축 좌표값(당연)이며 width,height는 아시는 그대로입니다.
조금 다른점은 fill이란 것으로 배경색을 사용한다는 점 정도네요. svg의 크기보다 안의 태그의 크기가 클경우 div의 overflow:hidden과
같이 가려져버립니다. (억지로 overflow:visible이 가능하긴합니다.)
일단 간단한 예제로 본 HTML과 다른점은
1.HTML태그와는 달리 서로 밀어내지 않고 겹침(display 개념이 아닙니다.)
2.위치값 조절은 x,y로만 가능하며 css로 style지정은 가능하나 left,top등의 값은 먹지않음
3. 태그별 역할이 뚜렷함 ( HTML은 마음만 먹으면 div로 모든걸 만들수 있는 것과 대조적)
정도이며 같은점은
1.CSS를 활용하여 모양을 만들 수 있음.
2. 문법이 같으며 svg안에 다른 svg를 넣는 등 부모자식의 개념도 존재
입니다. 아직 기초만 보고 판단한 다른점,같은점 이므로 저게 전부라곤 생각하지 말아주세요!
댓글