SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。
TIPS Vol.34 SVGの作り方
TIPS vol.64 SVGのデータ作成で気をつけるポイント

SVGはベクター形式の画像。
jpgやpngなどの形式の画像と違いパスデータで構成されており、そのパスの情報をXML形式で持っているためコード上での編集が可能です。

そのため、XML形式のアニメーションタグを使ってアニメーションをつけたり、パスごとにクラス名をつけて細かくCSS3のアニメーションでSVG画像に動きをつけることができます。

ペンで描画するような線の動きと、塗りを変化させる動きを組み合わせたSVGアニメーションです。

サンプルコード

#boel{stroke:#000; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
@keyframes anim{
0%{stroke-dashoffset:1425px;}
30%{fill:transparent;}
60%{stroke-dashoffset:0;}
100%{stroke-dashoffset:0; fill:#000000;}
}

サンプルコード解説

stroke
パスの線、また図形を縁取る線の色を指定。

fill
図形の塗りの色を指定。

stroke-width
線の太さを指定。単位はpx、em、remなどが使用可能。

stroke-dasharray
線の長さ・線と線の間隔を指定。

stroke-dashoffset
線の開始位置を指定。

animation
CSSアニメーションのプロパティ

stroke-dasharray
図形の線を破線形にし、一区切りの線の長さ・線と線の間隔を指定します。

stroke-dashoffset
線の開始位置を指定します。
数値を入れると、もとのパス情報の位置から指定した数値分、位置が移動し、もとのパスの位置からズレた分は非表示になります。

stroke-dasharrayで線の長さを、図形の縁に隙間がないよう全体を覆う長さにし、stroke-dashoffsetで同じ数値を入れることで、図形を縁取っている線の長さ分位置が移動して図形が非表示のように見える状態になります。

サンプルコード

サンプルコード解説

SVGを格納するための要素
style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;"縁取り線を描画するためのCSS要素。
XMLで動かす際にも、ベースとなる線の情報が必要になるため入れておく必要があります。

SVGに動きをつけるための要素

attributeType
アニメーションさせる対象の属性の種類を指定。XMLかCSS、autoが指定できる。
autoでの優先順位はCSS→XML
上記サンプルでは、変化させたい属性がCSSプロパティのためCSSを指定しています。

attributeName
アニメーションさせる対象の属性を指定。x・yなど座標や、width・heightなどが指定できる。
上記サンプルでは、線の位置を指定するstroke-dashoffsetと、図の塗りを指定するfillをアニメーション対象に指定しています。

dur
アニメーション1回の時間を指定

values
アニメーションの属性値を指定。セミコロンで区切ることができます。

keyTimes
アニメーションを開始するタイミングを指定。0（開始）〜1（終了）で指定する。
keyTimesで指定した時間区分はvaluesと連動するため、valuesの属性値の数と、keyTimesの時間区分を同じ回数にする必要がある。

repeatCount アニメーションの繰り返し回数を指定。
繰り返しの回数（数値）、もしくはindefinite（ずっとループ）が指定できる。

図形のパス情報を変化させ、変形させるアニメーション。
パス情報はCSSで変化をつけることができないので、XMLでの方法のみを紹介します。

サンプルコード

サンプルコード解説

図形のパスデータを格納するための要素

attributeName
アニメーションさせる対象の属性を指定。
サンプルでは d、パス情報をアニメーション対象にしています。

illustratorなどで図形を作成する際、変形元の図形から、変形した図形を作るときにパスの数を変えてしまうと滑らかな動きが実装できません。

要素に回転や拡大縮小をさせたり、位置を移動させるなどのアニメーションです。

サンプルコード

#tonton circle{fill:#000000; transform:translate(0,0); animation:animT 2s linear 0s infinite;}
@keyframes animT{
0%{transform:translate(0,0);}
12.5%{transform:translate(80px,130px);}
25%{transform:translate(160px,20px);}
37.5%{transform:translate(240px,130px);}
50%{transform:translate(300px,20px);}
62.5%{transform:translate(240px,130px);}
75%{transform:translate(160px,20px);}
87.5%{transform:translate(80px,130px);}
100%{transform:translate(0,0);}
}

サンプルコード

サンプルコード解説

circle
円形パスの要素

animateTransform
animate要素では使用できない、CSS3のtransform属性を使用するための要素。
基本的な使い方はanimateと同じ

animateタグは、動かしたい要素内に記述する必要があります。
svg画像全体を動かしたい場合は、の間に記述しますが、上記サンプルではsvg内のcircle要素のみを動かしたいのでの間にanimateタグを記述しています。

サンプルコード

サンプルコード解説

動きの軌道となるパスの線要素。
mpath要素でid参照をするため、idの設定が必須です。

animateMotion
パスデータでのアニメーション処理を行うための要素

mpath
animateMotionの子要素。
xlink:href属性で軌道となる線要素のidを指定し、参照します。

いかがでしたでしょうか。
今回は、SVGアニメーションの基本的な要素やCSS、XML上での動かし方を紹介しました。
ちょっとした動きや、アイコンや文字の簡単なアニメーションの実装ならあまり難しいコーディングが必要ではないと感じていただけたのではないかと思います。

もっと複雑なパスの図版などをアニメーションにするにはCSSやXMLでは難しいですが簡単にSVGにアニメーションをつけることができるJavaScriptのプラグインも多くあるので、うまく組み合わせてSVGを効率的に使えるようになると良いと思います。