SVGの仕様には、SVGエレメントを簡単なタイムベースのアニメーションにするための、アニメーション・エレメントが含まれています。説明的SVGアニメーションを利用すれば、SVGクリエーターは、単純なカラーの変化からアニメーション化したフィルタ効果、拡大・縮小や回転を含む動画アニメーション、パスに沿った動画アニメーション、イーズ・イン、イーズ・アウトなど、さまざまな洗練されたエフェクトを可能にするkeySplines属性を利用したアニメーションまで、あらゆるアニメーションを作成することが可能になります。このレッスンではこれらのアニメーション・エレメントのいくつかに関して、簡単に見ていくことにします。細部に関してはSVGの仕様を参照してください。

カラー・アニメーション
単純なカラー効果から始めましょう。<animateColor>エレメントは、もっぱらSVGエレメントのカラー・プロパティをアニメーション化します。

<animateColor attributeName="fill"
 attributeType="CSS" values="red;blue;yellow;green;red"
 dur="10s" repeatCount="indefinite"/>

attributeName属性は、アニメーション化される属性ないしプロパティを割り出すためのものです。attributeType属性は、“CSS ”（SVG仕様によってアニメーション化可能と定義されるCSSプロパティ）、“XML ”（同スペックで定義されている、アニメーション化可能なXML属性）、“auto”（デフォルト設定）のうちのいずれかである可能性があります。

さてアニメーション・エレメントは何をアニメーション化すればよいかを知りました（“gradient_star”のfillプロパティ）。次にどのようにアニメーション化するのかが問題となります。プロパティと属性値は次の属性によって定義することができます。

from
アニメーションの開始値を指定する。

to
アニメーションの終了値を指定する。

by
アニメーションの相対的オフセット値を指定する。

values
セミコロンで区切られた値のリスト。

ここの例では、fillプロパティが、カラー値、赤、青、黄、緑、そして赤に戻るという具合にアニメーション化されます。

最後にdur属性とrepeatCount属性がアニメーションのタイミングをコントロールします。アニメーションのトータル時間は、dur属性で定義されています。この場合には10秒です。アニメーションの繰り返し回数は、repeatCount属性で定義されます。repeatCount値を“indefinite”に指定することにより、アニメーションは無限にループします。

このSVGのテキスト・エレメントもまた、同様のアニメーションを含んでおり、エレメントの不透明度プロパティをターゲットにしています。

モーション・パス
<animateMotion>属性は、回転、拡大・縮小、移動、歪みといった基本的な変形による、単純なアニメーションを可能にします。

<animateMotion>エレメントにパス・データを含めると、SVG のエレメントをパスに沿ったアニメーションにすることもできます。指定されたパスに沿って動く際に、rotate属性がSVGのエレメントの回転をコントロールします。回転値は、ユーザーの現在の座標系のX軸からの相対的角度を表す場合もあります。また、“auto”は、時間の経過とともにモーション・パスの方向にアニメーション化されたオブジェクトを回転させ、“auto-reflect”は、モーション・パス＋180度の方向にオブジェクトを回転させます。上の実例では、垂直図形８上のテキストは“-45”のrotate値でアニメーション化されています。一方で、水平図形８上のテキストは、rotate値“auto”でアニメーション化されています。

モーションのコントロール
アニメーション中の値間のデフォルト挿入は単純にリニアです。以下にあげる設定によって、calcMode属性が値の挿入とタイミングをコントロールします。

discrete
挿入なしに、アニメーションがある値から次の値にジャンプします。

linear
デフォルトの設定です。

paced
“linear”に似ていますが、もっぱらリニア数レンジを規定する値に用いられます。

spline
三次元ベジェスプライン関数によって規定される時間関数にしたがって値を挿入します。

KeySplines
“spline”モードを使うと、最小限の定義で数多くの洗練された効果を生み出すことができます。たとえば、時間の経過とともにエレメントのx、y座標の位置をコントロールしてやると、座標の変化率に従ってオブジェクトのパスがコントロールされます。

“spline”モードでは、アニメーション・エレメントはkeySplines属性を含んでいなければなりません。keySplinesは、アニメーションのインターバルの速度をコントロールする三次元ベジェ・コントロール・ポイントを定義します。このようなコントロールを利用すると、速度をスムーズに変化させることができます（たとえば、“ease in”と“ease out”）。これは動画アニメーションの場合に重要となる場合もあります。

上の実例では、それぞれの円が“cx”と“cy”に関して同じ開始値と終了値を与えられています。“cy”についてのkeySpline定義のみが異なっています。

下の図表は、ベジェ・コントロール・ポイントによって、開始時間と終了時間の加速と減速がどのようにコントロールできるかを示しています。上の実例のy軸に沿った円の加速と減速が、ベジェ・コントロール・ポイントによって定義されたベジェ曲線に一致している様子をご覧ください。

このサイトのデモと実例エリアにある、ほかの説明的アニメーションの実例も必ずご覧になってください。

SVG 仕様に盛り込まれているアニメーション機能は比較的幅広く、アニメーションの一般的アスペクトの多くのをカバーしてはいるものの、SVG  DOMと、JavaScriptによるスクリプト可能なアニメーション機能を利用すれば、さらにバラエティーに富んだアニメーションを作成することが可能です。

次のレッスン：JavaScriptアニメーション