SVG 애니메이션 소개

Source: Dev.to

SVG를 애니메이션화하는 방법은 여러 가지가 있습니다:

• SVG/SMIL
• CSS 애니메이션
• JavaScript

SVG/SMIL

SMIL은 Synchronized Multimedia Integration Language의 약자로, XML 기반 언어이며 SVG 요소 내부에서 다양한 속성을 직접 애니메이션할 수 있게 해줍니다. 장점 중 하나는 SVG를 <img> 태그로 삽입했을 때도 애니메이션이 유지된다는 점입니다.

일부 논의에서는 SMIL이 구식이라고 주장하지만, caniuse 에 따르면 SVG SMIL은 주요 브라우저에서 여전히 완전히 지원됩니다.

SMIL은 animate, set, animatemotion, animatecolor 등과 같이 SVG 요소 내부에서 직접 사용할 수 있는 여러 애니메이션 요소를 정의하며, 이를 통해 형태 변형 및 기타 효과를 구현할 수 있습니다.

SVG/SMIL 사용에 대한 자세한 가이드는 CSS‑Tricks의 “A Guide to SVG Animations with SMIL” 기사를 참고하세요.

CSS

CSS를 사용해 SVG를 애니메이션하는 것이 적합한 경우는 애니메이션이 단순하고 프레젠테이션 속성, transform 속성 또는 기타 CSS 속성에 의존할 때입니다. 자세한 내용은 프레젠테이션 속성 논의를 참고하십시오.

JavaScript

JavaScript는 DOM 요소를 조작할 수 있어 SVG 애니메이션에 강력한 도구가 됩니다. 특히 animate 메서드를 사용하면 복잡하고 스크립트 기반의 애니메이션을 만들 수 있습니다.