SVGのアニメーション手段とその選び方

SVGアニメーションの手段

HTMLに組み込んだSVGをアニメーションさせる方法は以下の3つ。

• CSS
• JavaScript
• HTML - SVG element

結論から言うとCSSかJavaScriptのどっちかを使うべき。
CSSでアニメーションできる範囲ならCSS、それ以上したいならJS。ブラウザ対応は考慮してない。

CSS

CSSからSVGの各プロパティの値を変更する。さわれる属性は限られているがシンプルに実装しやすい。

制御範囲はSVGのプレゼンテーション属性と呼ばれる属性に限られる。(プレゼンテーション属性一覧: https://www.w3.org/TR/SVG/propidx.html)
正直一覧を見てもピンとこないので以下に例を示す。

できることの例

• SVGの線や塗りのRGBAを変更する
• 線の幅やスタイル(破線とか点線とか)を変える
  • シェイプが筆跡に沿って徐々に現れる的な(https://css-tricks.com/svg-line-animation-works/)
  • 

できないことの例

• SVGを構成するパスの制御点の座標を制御
  • 下図のように、点を引っ張って形を変える的な
  • 

JavaScript

SVGを構成するDOM要素をJSで書き換えるのでやりたい放題できる。
ライブラリもたくさんある。

• Snap.svg
• Svg.js
• Greensock
  • 商用はライセンス料がかかるので注意。

モーフィングみたいなピンポイントな表現のためのライブラリとかもある。

• SVG-Morpheus
• react-svg-morph
• Greensock (のmorphingPlugin)

HTML - SVG element (非推奨)

SVG要素の一つであるanimateタグを使う。
SMIL(Synchronized Multimedia Integration Language)というらしい。
今後ブラウザがサポートしていくかどうか決定していないので非推奨。

リファレンス: https://developer.mozilla.org/ja/docs/Web/SVG/Element/animate
サンプルコード: http://codepen.io/chriscoyier/pen/DpFfE

備考: SVGかCanvasか

でかいアニメーションならSVG、パーツが多いならCanvas。

SVGは描画要素の表示面積が大きくても座標データから画像を生成できるので軽い。
CanvasはDOMツリーを形成しないのでアニメーションの構成要素が増えても軽い。

参考記事

• SVG MANIAX - CSS Nite After dark7
  • SVGの基礎
• SVGアニメーションの現状
  • SVGアニメーション