SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。
SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。

SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。

静止画のSVG

アニメーションを作成する前に、まず静止画のSVGを用意して、中身を見てみましょう。
SVGファイルをエディタで開くと、下記のようになっています。
これにアニメーションの指示を追加していきます。

このpathタグの中のd属性が、パスのデータになります。方法は後述しますが、このd属性を操作するので、「d=”XXXX”」の記述がある状態にしてください。

▲ ハート型を表すd属性の値。d属性があればpathタグでもcircleタグでも構いません。

＜d属性がない場合＞
IllustratorでSVGを作成するとd属性が無い場合があるので、下記のサイトでファイル圧縮を試してみてください。
Compressor.io – optimize and compress JPEG photos and PNG images

基本のアニメーション

animateタグを追加する

では早速、簡単なアニメーションを作ってみましょう。animateタグを使うと、pathの属性値を操作するアニメーションを作成することができます。
まずはコピペで良いので、下記のanimateタグをpathタグの中に記述してみてください。

▲ pathタグは単一だったので、終了タグ（</path>）を追加します。開始タグ末尾の”/”を削るのを忘れずに。


これでパスの色が変わります。
各属性を解説すると、下記のようになります。

CSSアニメーションを作ったことがある方であれば、おおよその感覚はすぐ掴めると思います。
秒数や色の値を編集して再度表示してみると、また違ったアニメーションが作成できると思います。

キーフレームアニメーション

先程は開始と終了の2点を指定したアニメーションでした。
次に、中間の色を追加してみましょう。

animateタグの記述が変わりました。values属性の中に、セミコロン区切りで3つの値が入っています。これでピンクから水色を経由して、黄色に変わるアニメーションになります。

▲ valuesを使うときはfrom属性とto属性は不要になります


値をセミコロンで区切れば、いくつでもキーフレームを追加できます。

▲ 5つの値をセミコロン区切りで繋げました。

パスが変形するアニメーション

キーフレームアニメーションの応用です。
valuesにd属性の値を挿入すると、パスを滑らかに変形させることができます。

まず静止画でアニメーション開始時点のパスと、終了時点のパスを作ります。
作成時の注意として、パスのポイントの数はどちらも同じにします。開始の時に4つであれば、終了時も4つです。ポイントの数を変えてしまうと上手に動かないので注意してください。

開始時点

終了時点

開始時点のpathタグのd属性と、終了時点のpathタグのd属性に注目してください。
これらの値をコピペして、キーフレームアニメーションとしてvaluesの中にセミコロン区切りで記述します。すると、それだけで間のアニメーションは自動で補完されます。簡単ですね。

▲ 先程はfill属性を操作しましたが、次はd属性を操作するので「attributeName=”d”」に設定します。




終了後に逆再生の動きで元に戻したい場合は、valuesの最後に最初と同じ値を挿入します。

SMILを使用すればパスを操作できるので、CSSとはまた違った動作が可能です。アプリの中で使用することもできるので、表現の幅が広がります。是非試してみてくださいね。