Posted at

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

More than 3 years have passed since last update.


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)

正直一覧を見てもピンとこないので以下に例を示す。


できることの例


できないことの例



  • :black_nib:SVGを構成するパスの制御点の座標を制御


    • 下図のように、点を引っ張って形を変える的な

    • image




JavaScript

SVGを構成するDOM要素をJSで書き換えるのでやりたい放題できる。

ライブラリもたくさんある。

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


HTML - SVG element (非推奨) :no_good:

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ツリーを形成しないのでアニメーションの構成要素が増えても軽い。


参考記事