付録D: SVG文書のアニメーション

SVGは、ベクターグラフィックスを時間経過で変化させて アニメーション効果を作成することができます。 SVGコンテンツは、以下の方法でアニメーション可能です:

• SVGのアニメーション要素 [svg-animation]を使用する方法。 SVG文書フラグメントは、文書内の要素の時間依存な変化を記述できます。 様々なアニメーション要素を使うことで、 著者は動きのパスや、要素の属性・スタイルプロパティの補間を定義できます。 これらの効果は連鎖させたり、文書内の他のイベントに応じて発動させたりできます。
• CSSアニメーション [css-animations-1]を使用する方法。 このCSSモジュールは、著者がキー フレームを使用してCSSプロパティの値を 時間経過でアニメーションする方法を定義します。 これらのキー フレームアニメーションの挙動は、継続時間、繰り返し回数、繰り返し方法を指定することで制御できます。
• CSSトランジション [css-transitions-1]を使用する方法。 このCSSモジュールは、 CSSプロパティの値が指定された期間にわたり 徐々に変化するように設定できるプロパティを定義します。
• SVG DOMを使用する方法。 SVG DOMはDOM4仕様の拡張として定義されています [dom]。 すべての属性やスタイルシートの設定は スクリプトからアクセス可能であり、SVGは効率的なアニメーションを スクリプトで実現するための追加DOMインターフェースを提供します。 理想的には、スクリプト対応のユーザーエージェントは HTMLで定義されているアニメーションフレームAPIも 実装することが望まれます [HTML]。
• Web Animations API [web-animations-1]を使用する方法。 このDOM APIは、ユーザーエージェント最適化されたアニメーションを スクリプトからスタイルプロパティや属性に対して発動できるインターフェースを提供し、 著者が個々のフレームの値を計算する必要なく利用できます。

SVGは、これらのアニメーション手法のいずれかのサポートを義務付けていません。 ただし、対応するユーザーエージェントはSVG文書や他の文書内のSVGフラグメントでも対応することが期待されます。 宣言的またはスクリプトによるアニメーションをサポートするユーザーエージェントは、 処理モードに基づく制限や 適合性章で定義された要件、 use要素のシャドウツリー内アニメーションに関する特別な要件に準拠する必要があります。