SVGのアニメーション

SVGのアニメーションについて

SVGは静止画だけではなくアニメーションとして描写を動かすこともできます。
SVGのアニメーションにはSMIL(Synchronized Multimedia Integration Language)を用います。
SMILとはXMLによって時間による動的な描写やレイアウトなどを記述する言語です。
今回はSMILのanimate要素を使ってSVGの描写を動かしたいと思います。

animate要素の使い方

animate要素は時間経過によってSVGを描写する属性の値を変化させて描写を動かします。
書式の例としては

<animate attributeName="変化させるSVGの属性" from="開始時の値" to="終了時の値" dur="描写を行う時間" repeatCount="描写の回数"/>

このようになります。


今回は円と直線のSVGのアニメーションを作りました




5秒間で不定の回数描写を行うアニメーションです。
このSVGのXMLは空要素のanimate要素を開始タグと終了タグの各描写の要素で囲んでいます。


animate要素の他にもパスに沿って描写を動かすanimateMotion要素があります。
またCSSやJavsScriptを組み合わせてアニメーションを作ることもできます。