20년 넘은 기술임에도 불구하고 SVG는 그동안 많이 사용되지 않았다. 로고같은 곳에 조금씩만 사용되었는데 요즘은 대부분의 아이콘을 SVG로 처리할 정도로 활용처가 많아졌다. 피그마나 제플린 같이 백터 그래픽을 쉽게 다루고 추출할 수 있게 해주는 도구의 발전도 한 몫 했다. 덕분에 나도 최근들어 SVG를 많이 사용하게 됐는데 CSS와의 조합이 아주 좋아서 유용하게 사용하고 있다.

이미지 파일은 한 번 추출하면 변형을 할 수가 없는데 SVG는 코드로 되어 있기 때문에 수정도 용이하고 동적인 처리도 할 수 있다. 예를 들어서 모양은 같지만 다양한 색의 아이콘을 사용하는 경우가 있다고 가정하자. 이미지 파일이라면 각 색상별로 파일이 따로 있어야 하지만 SVG는 하나의 SVG 파일을 재사용하면서 fill이나 stroke 만 변경하는 방법으로 구현이 가능하다. 색을 CSS 변수로 지정하는 것도 가능하다.

그동안 SVG 애니메이션을 사용해본 경험이 없었는데 SVG가 CSS와 잘 혼용되는 것을 보고 CSS 키프레임 애니메이션을 SVG 파일 안에서 관리가 가능할지 변환해 보기로 했다. 변환을 해 본 애니메이션은 익숙한 로딩 아이콘이다. 이 아이콘은 구현 기법도 무릎을 칠 만큼 상당한 아이디어가 녹아 있는 잘 만들어진 아이콘이다. 애니메이션 대상은 하나의 SVG circle 요소인데 회전과 점선의 간격 조정으로 훌륭한 효과를 만들고 있다. 사용된 애니메이션은 세가지이다. 회전과 점선의 길이(stroke-dasharray), 점선의 위치(stroke-dashoffset)이다.

SVG 애니메이션은 애니메이션을 적용할 대상의 하위에 animation 요소를 추가해서 구현할 수 있다. 하나의 animation 요소가 하나의 애니메이션 해야 하는 속성을 담당하게 된다. 회전은 속성이 아닌 트랜스폼이어서 animationTransform 요소를 사용한다. attributeName에는 속성을 지정하고 각 속성에 해당하는 추가 옵션을 지정해서 애니메이션을 구현하게 된다. from과 to는 변화하는 값의 시작과 종료 값을 지정하고 dur은 진행 시간을 정의하는 식이다. values로 시작, 종료 값을 여러개 지정할 수도 있다.

MDN을 많이 참고하고 삽질도 좀 했지만 결과적으로 CSS 키프레임 애니메이션으로 구현된 애니메이션을 SVG 파일 안에 동일하게 정의할 수 있었다.

<svg width="30" height="30" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#009acc" stroke-linecap="round" stroke-width="5">
    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="2s" repeatCount="indefinite" />
    <animate attributeName="stroke-dasharray" values="1, 150; 90, 150; 90, 150" dur="1.5s" repeatCount="indefinite" />
    <animate attributeName="stroke-dashoffset" values="0; -35; -124" dur="1.5s" repeatCount="indefinite" />
  </circle>
</svg>

SVG loading animation:

이런 로딩 아이콘의 경우 CSS와 SVG로 나눠서 관리하기 보다는 하나의 SVG 파일로 관리하는 것이 더 용이하다. SVG는 DOM 기능으로 접근이 가능하기 때문에 자바스크립트로 속성을 직접 제어하기가 쉽다. 이미지만 사용할 때 보다 동적인 변화를 제어하기가 쉬워서 요즘같은 디자인 트랜드라면 SVG의 활용도가 높을 것으로 기대된다.