SVGをアニメーションで動かすには

SVGを動かすにはCSSアニメーションやJavaScript、jQueryなどを使う方法がありますが、もっとも簡単な方法は「@keyframes」でアニメーションのセットを作成し、pathやcircleといったSVGの構成要素に「animation」プロパティを指定することです。

例えば、pathにアニメーションを指定するには、以下のように指定していきます。

path{
　　animation: pathAnimation ease-in-out 3s;
}

@keyframes pathAnimation{
　　from{
　　　　stroke-dashoffset: 100;
　　　　fill-opacity: 0;
　　}
　　to{
　　　　stroke-dashoffset: 0;
　　　　fill-opacity: 1;
　　}
}

stroke-dasharrayには線がすべてつながるまでの値を指定していくのがポイントです。
上記の例はあくまでもシンプルな形で表現したアニメーションですが、プロパティを加えていったり「@keyframes」のタイミングを動かすことで複雑なアニメーションを実装することもできるようになります。

まとめ

XMLタグやCSSプロパティは他にも山ほど存在していますが、基本として押さえておきたいのは以上の通りです。
これらを組み合わせていけば、思った通りの描画やアニメーションを作成することができるでしょう。

ご覧いただいておわかりの通り、実はSVG自体はHTMLのようなタグやCSSで制御できるので、Webデザイナーにとって非常に馴染みのあるものなのです。
Illustratorなどで作成したSVGには普段使わない属性などがくっついてくるので、初めてSVGの中身を見ると困惑してしまうかもしれませんが、実は簡単だと実感していただければうれしいです。