Snap.svg 는 SVG 형식의 벡터이미지를 이용해 웹상에서 애니메이션을 구현하는 Javascript 라이브러리이다.

예전부터 D3나 여타 라이브러리를 이용해 그래프를 그리거나 간단한 애니메이션을 구현해 보고 싶었다. 업무 중에 그럴 기회가 잘 없어서 억지로 제작 중인 웹사이트의 로고에 있는 별을 돌려보겠다고 시작했다. 막상 해보고 나니 굳이 SVG 를 이용할 이유는 없었지만, 뭐 공부라고 생각하기로 했다.

제작 중에 아래의 웹사이트를 참고했다.

SVG 이미지 제작하기

SVG 는 벡터이미지를 HTML 형식으로 표현한 형태이다. Snap.svg 공식 웹사이트에서 Javascript 형식으로 간략화된 SVG 제작 문서를 제공하지만 복잡한 형태를 일일히 좌표를 찍어주는 방식으로 제작하는 것은 쉽지 않다.

간단하게 Adobe Illustrator 를 이용해서 그린 벡터이미지를 SVG 형식으로 저장할 수 있다.

Ctrl + Shift + S 를 눌러 다른 이름으로 저장한 뒤, 포멧을 SVG로 선택한다.

저장된 SVG 파일을 텍스트 에디터로 열어보면, HTML 형식으로 만들어진 좌표값들을 확인 할 수 있다. Adobe Illustrator 가 자동으로 생성하는 SVG 는 Dreamweaver가 생성하는 HTML 코드처럼 불필요한 내용이 많아 지저분하다. 나는 별모양을 하나 그렸고, 실제로 SVG 를 그리는데에 필요한 부분은 svg 태그로 감싸진 아래 부분이다.

<svg>
    <path d="M12.581,0l2.972,9.004h9.609l-7.776,5.568l2.973,9.004l-7.777-5.564l-7.776,5.564l2.972-9.004L0,9.004h9.611L12.581,0z" /> 
</svg>

Snap.svg로 SVG 이미지 생성하기

var s = Snap("#logo-star");
var star = s.path("M12.581,0l2.972,9.004h9.609l-7.776,5.568l2.973,9.004l-7.777-5.564l-7.776,5.564l2.972-9.004L0,9.004h9.611L12.581,0z");

star.attr({
 fill: "#EF4938"
});

s로 정의된 #logo-star 는 이 SVG 이미지의 캔버스 역할을 한다. CSS로 적당한 크기를 지정해주면 된다.

star로 정의된 부분은 실제 도형을 그리는 부분으로, 앞서 설명한 svg 태그 안의 path 값을 넣어주면 된다. Illustrator 에서 생성한 SVG 파일의 내용이 path로 정의되었기에 s.path()함수를 이용해서 모양을 만들었고, g 라던가 polygon 같은 태그로 제작되어 있을 경우 공식 도큐먼트를 검색해서 필요한 함수를 사용하면 된다.

Snap.svg로 애니메이션 제작하기

star_rotate();

function star_rotate(){
  star.stop().animate(
    { transform: 'r359,13,12' }, // 애니메이션 형태 정의
    10000, // 위의 동작이 실행되는 시간
    function(){
      star.attr({ transform: 'rotate(0 13 12)'}); // 도형의 위치를 처음으로 되돌린다.
      star_rotate(); // 함수를 다시 실행한다. (재귀적 호출)
    }
  )
}

맨 처음에 소개한 예제에 따라, 별이 시간 제약없이 계속해서 돌도록 함수를 재귀적으로 호출한다. 시간 제약이 있는 애니메이션을 구현할 경우에 굳이 함수화할 이유는 없다.

주의할 점은, transform: 'r359, 13, 12' 에서 r 이 rotate를 의미하는데, 한 바퀴를 다 돈다고 해서 r360으로 기록하면 재귀호출이 되지않는다. 한바퀴 다 돌기 직전인 r359으로 지정해주어야 문제없이 애니메이션이 재실행된다.