『Graphery SVG』 간편한 svg JS라이브러리

 

svg는 위와 같은 효과를 구현하기에 적합하다. 

하지만 막상 svg를 사용하려면, 하드코딩이 떠오른다.

 

canvas, svg와 같은 웹 그래픽 라이브러리들을 사용하려면 꽤 많은 공임이 발생한다.

이때 필요한 라이브러리가 바로 Graphery SVG이다.

 

Graphery SVG

 

│CDN

<script src="https://cdn.graphery.online/svg/0.1.4/script/index.js"></script>

 

 

│사용법

Graphery.js는 가상DOM, CSS을 활용한다.

DOM을 통한 이벤트를 사용할 수 있고,

CSS의 애니메이팅과 같은 기능과 결합할 수도 있다.

 

가령, <div id="content"></div>라는 DOM을 생성하고,

변수를 하나 생성한 뒤 gySvg(), attachTo()를 차례대로 붙이면

아래와 같은 SVG애니메이션을 <svg>태그없이 사용할 수 있다.

 

 

 

웹에서 그래픽을 만드는 작업은 생각보다 어렵다.

생각을 막상 그리는 작업은 시행착오가 발생할 수밖에 없다.

 

이때 Graphery.js를 사용한다면,

책을 읽듯 직관적인 코드로 그림을 그려낼 수 있다.