Animating SVGs Without a Library: What Actually Works

Context

SVG 애니메이션 구현 시 외부 라이브러리에 의존하는 것이 일반적이나, SVG 내장 애니메이션 기능이 더 높은 성능과 정확도를 제공함에도 불구하고 문서화 부족과 구현 함정으로 인해 활용도가 낮았다.

Technical Solution

• SMIL 활용: SVG 마크업 내 <animate>, <animateTransform>, <animateMotion> 요소를 사용해 JavaScript 없이 네이티브 애니메이션 실행
• CSS 애니메이션 적용: @keyframes를 인라인 SVG 요소에 적용하여 변환, 불투명도, 색상 변경 애니메이션 구현
• Web Animations API 활용: 경로 데이터(d 속성) 등 복잡한 속성 애니메이션 및 시퀀스 제어를 위해 JavaScript 기반 애니메이션 API 사용
• 경로 드로잉 효과 구현: stroke-dasharray와 stroke-dashoffset 속성 조합으로 경로가 자동 그려지는 효과 제작 (path.getTotalLength()로 정확한 경로 길이 계산)
• Transform-origin 문제 해결: transform-box: fill-box 속성을 사용해 HTML과 동일한 변환 기준점 설정

Impact

경로 드로잉 애니메이션에서 정확한 stroke-dashoffset 값 설정 시 시각적 간격이나 잘림 현상 제거 가능. GPU 가속화된 변환 애니메이션은 50개 동시 요소 기준 모바일 환경에서 프레임 드롭 회피 가능.

Key Takeaway

SVG 애니메이션 개발 시 cx, cy, r, width, height, d 속성 애니메이션 대신 transform 기반 변경을 우선하고 will-change: transform 힌트를 사용하면 GPU 가속 활용으로 성능을 극대화할 수 있으며, transform-box: fill-box 한 줄의 속성 설정이 좌표계 혼동의 90%를 해결한다.