SVG는 벡터 그래픽을 시간에 따라 변화시켜
애니메이션 효과를 만들 수 있는 기능을 지원합니다.
SVG 콘텐츠는 다음과 같은 방식으로 애니메이션할 수 있습니다:
SVG의 애니메이션 요소
[svg-animation] 사용.
SVG 문서 조각은 문서 요소에 대한 시간 기반 변경을 설명할 수 있습니다.
다양한 애니메이션 요소를 사용하여 작성자는 움직임 경로나 요소의
속성과 스타일 속성을 보간할 수 있습니다. 이러한 효과들은 서로 연결하거나
문서 내의 다른 이벤트에 반응하여 트리거할 수 있습니다.
CSS 애니메이션
[css-animations-1] 사용.
이 CSS 모듈은 작성자가 키프레임을 이용해 CSS 속성 값을 시간에 따라
애니메이션할 수 있는 방법을 정의합니다. 이러한 키프레임 애니메이션의 동작은
지속 시간, 반복 횟수, 반복 동작을 지정하여 제어할 수 있습니다.
SVG DOM 사용.
SVG DOM은 DOM4 명세의 확장으로 정의되어 있습니다
[dom].
모든 속성과 스타일시트 설정은
스크립팅으로 접근할 수 있으며, SVG는 스크립트 기반 애니메이션을 효과적으로 지원하기 위한
추가 DOM 인터페이스를 제공합니다.
이상적으로는 스크립팅을 지원하는 사용자 에이전트는
HTML에서 정의된 애니메이션
프레임 API도
구현해야 합니다 [HTML].
웹 애니메이션 API
[web-animations-1] 사용.
이 DOM API는 스타일 속성과 속성의 사용자 에이전트 최적화 애니메이션을
스크립트로 트리거할 수 있는 인터페이스를 제공하며,
작성자가 개별 프레임의 값을 직접 계산할 필요 없이 사용할 수 있습니다.
SVG는 이러한 애니메이션 방식 중 어떤 것도 필수적으로 지원하지 않습니다.
그러나 이를 지원하는 사용자 에이전트는 SVG 문서와 다른 문서 내의 SVG 조각에서도
이를 지원해야 합니다.
선언적 또는 스크립트 기반 애니메이션을 지원하는 사용자 에이전트는
processing mode에 기반한 제약을
적합성 챕터에서 정의된 대로 준수해야 하며,
use 요소 섀도 트리 내 애니메이션에 대한
특별 요구사항도 따라야 합니다.