SVG 애니메이션 3가지 방식(SMIL, CSS, JavaScript) 비교와 브라우저 지원 현황 정리함

Context

SVG 애니메이션 구현 방법은 SVG/SMIL, CSS, JavaScript 세 가지로 구분됨. SMIL이 더 이상 지원되지 않는다는 논의가 있었으나 major browsers에서 여전히 완전 지원됨.

Technical Solution

• SVG/SMIL: XML 기반 언어로 SVG 요소 내에 직접 animate, set, animatemotion, animatecolor 등의 태그를 사용하여 애니메이션 처리함
• SMIL 특징: SVG가 img 태그에 삽입되어도 애니메이션이 유지됨
• CSS: presentation attributes, transform property 등 간단한 애니메이션 요구 시 적합함
• JavaScript: DOM 요소 조작을 통해 SVG 애니메이션을 제어하므로 가장 강력한 유연성을 제공함
• method animate(): JavaScript에서 사용할 수 있는 SVG 애니메이션 전용 메서드임

Impact

caniuse 기준 major browsers에서 SVG SMIL 완전 지원 확인됨.

Key Takeaway

애니메이션 복잡도에 따라 적합한 도구를 선택해야 함. 간단한 표현에는 CSS, 복잡한 동적 제어가 필요하면 JavaScript, SVG 독립성 유지를 위해서는 SMIL 활용이 적절함.