2015年7月10日
SVGアニメーションの現状
(2015-06-05)by Sara Soueidan
本記事は、原著者の許諾のもとに翻訳・掲載しております。
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。
SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。
SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。
同期マルチメディア統合言語、またの名をSMIL（Synchronized Multimedia Integration Language）
SMIL（”スマイル”と発音します）はXMLベースの言語で、インタラクティブなマルチメディアプレゼンテーションを作るために宣言的なアニメーションを作ることを可能にするものです。これらのアニメーションは、HTMLやSVGなど他のXMLベースの言語を動かすために再利用することもできます。
昔も今も、SMILは主に、SVG画像をアニメーション化する3つの方法のうちの1つとしてWebコミュニティで知られています。
SMILには、SVGのコンテンツを動かす一連のアニメーション要素が含まれています。いくつか例を挙げてみましょう。
<animate>– ある期間にわたって、スカラー属性やプロパティをアニメーション化することができます。<set>– アニメーション化するための、便利で簡潔な方法です。アニメーションの値を、visibilityプロパティなど数字ではない属性やプロパティに割り当てるのに役立ちます。<animateMotion>– 要素をモーションパスに沿って動かします。<animateColor>– 特定の属性あるいはプロパティの色の値を、ひとりでに修正します。カラー値をとることができるプロパティに対して単純にanimate要素を使う方が多く、この要素はあまり使われなくなっていることに注意しましょう。
更に多くの要素がSVGで定義されていますし、更に多くの属性が上記の要素の機能を拡張するために加えられています。SVGで定義されている、最も重要なアニメーション要素は、 <animateTransform> です。これは、SVG要素における変形、例えば縮尺、回転、ゆがみなどをアニメーション化するために使うことができます。
SMILを使って要素をアニメーション化するのに必要な構文は、基本的に簡単で人にも読みやすいものです。アニメーション要素と同様、属性も分かり易く命名されているため、ほとんどの場合名前を見れば機能が一目瞭然です。
例えば、ある任意のパスに沿ってSVG要素を動かす構文は、以下のようになります。
<animateMotion
xlink:href=“#circle”
dur=“1s”
begin=“click”
fill=“freeze”
path=“M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5” />再利用のために、上のコードは次のように書き換えることができます。
<path id=“motionPath” d=“M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5”></path>
<animateMotion xlink:href=“#circle” dur=“1s” begin=“click” fill=“freeze”>
<mpath xlink:href=“#motionPath” />
</animateMotion>上記2つの例の違いは、2つ目の方ではパスの定義を分け、 <mpath> 要素を使ってパスを参照していることです。これにより、2つ目の例でやっているようにパスを描画領域に表示できることに加え、同じパスを複数の <animateMotion> で参照することができます。
どちらの例でも <animateMotion> 要素は動かしたい要素の中に入れることができますし、 <animateMotion> で xlink:href 属性を使って、アニメーションのターゲットを特定することもできます。
上記の例のライブデモは、 こちら でチェックできます。
任意のパスに沿った動きは、SMILを使って作れるたくさんの例のうちの1つです。これらのネイティブのSVGアニメーションの要素は、様々な効果を作るために使うことができます。なぜなら事実上、SVGのアニメーション属性なら何でもアニメーション化することができるからです。そしてこれが、SMILの最も強力な特徴の1つです。
例えば、 <animate> 要素を使うことで、要素の色、位置、面積その他をアニメーション化することができます。
また、パスデータ（ d 属性）をアニメーション化するために使うこともできるので、下にある画像のような、図形が移り変わる効果を作ることができます。
モーフィング処理を施した図形（By Noah Blon）
上の例は、Noah Blonによって作られたもので、ある図形から他の図形にパスデータを変えるためにSMILを使っています。Noahの例で使われているコードは、次のようなものになります。
<path fill=“#1EB287”>
<animate
attributeName=“d”
dur=“1440ms”
repeatCount=“indefinite”
keyTimes=“0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1”
calcMode=“spline”
keySplines=“0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1”
values=“M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 50,0
C 75,25 75,25 100,50
75,75 75,75 50,100
25,75 25,75 0,50
25,25 25,25 50,0
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z;”/>
</path>上のコードは、次のGIFに使われているような効果を生み出します。
全てのコードとライブデモは、 こちら から見ることができます。
Noahは複数のパスの形を values 属性の中で指定し、その後ブラウザがこれらの値の間でアニメーション化しました。これが可能なのは、 values の値が数字で定義されており、さらにきっちり同じ個数の点で構成されているからです。つまり実際には、動かされているのはパスを作る制御点だということです。
ほとんどの場合、属性の名前は一目瞭然ですが、そうではないものもあります。私はCSS-Tricksで、SMILに関する記事を書いたことがあります。そこには、もしもあなたが現在SMILを使おうと思っているなら、知っておくべきことが全て入っています。その記事は、 こちら で読むことができます。
CSS-Tricksの記事は、SMILのアニメーション要素と属性をよく説明しています。しかし、もしSMILをよく知るためにSMIL構文とCSSアニメーションのプロパティ構文を比較したいのなら、私がこの話題について話した時に使ったこちらの スライド をチェックしてみてください。
SMILはとてもパワフルで、素晴らしいパフォーマンスを持っています。しかし、全てのブラウザでサポートされているわけではありません。Internet Explorerは、どのバージョンでもSMILをサポートしたことがありませんし、今後もサポートしようというつもりもないようです。
さらにBlink（Chrome）では、CSSとWeb Animationを支持し、 SMILを廃止させようとする動き もあります。ですから、これらのアニメーションにとって、将来はあまり明るいものではありません。
SMILを廃止するということは、代わりのものは用意せずに、画像として取り込んだSVGをアニメーション化する機能を失うということです。このことについては、また後ほど、この記事の中でお話しましょう。
CSSを使ったSVGアニメーション
CSSを使ってSVG画像にスタイル付け、アニメーション化ができます。CSSを使ったSVG要素のアニメーション化は、HTML要素を使うのと全く同じように機能します。タイプセレクタ名といくつかのプロパティ名が異なるだけです。
SVG 1.1では、SVG要素のスタイル付けにCSSは一切必要なく、全てのスタイルは プレゼンテーション属性 によって適用されます。プレゼンテーション属性には fill 、 stroke 、 stroke-width 、 opacity などが挙げられます。
次の例は、星形のポリゴンに”border”（ stroke ）と”background color”（ fill ）のスタイルを付けるプレゼンテーション属性を使ったSVGスニペットです。
<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1” width=“300px” height=“300px” viewBox=“0 0 300 300”>
<polygon
fill = “#FF931E”
stroke = “#ED1C24”
stroke-width = “5”
points = “279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 “/>
</svg>プレゼンテーション属性は特別なプロパティで、SVG要素のスタイル付けに使う他、スタイルカスケードでは、ユーザエージェント（ブラウザなど）スタイルシートなどの要素内で継承されているスタイルよりも優先されます。
SVGにはたくさんのプレゼンテーション属性があります。しかし、ここで注目するのは CSS経由で設定、アニメーション化できる属性 です。
全てのプレゼンテーション属性がCSSで設定できるわけではありません。全ての属性がCSSでプロパティとして使えるわけではないからです。CSSプロパティとして利用できるプレゼンテーション属性のみがCSSで設定、アニメーション化できます。CSSプロパティとして 現在 利用可能な全てのプレゼンテーション属性は SVG 1.1の仕様に掲載 されています。
先のコード例に戻ってプレゼンテーション属性をCSSプロパティに変換する場合は、コードは次のように書き換えることができます。
<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1” style=“width: 300px; height: 300px;” viewBox=“0 0 300 300”>
<polygon
style = “fill: #FF931E; stroke: #ED1C24; stroke-width: 5;”
points = “279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 “/>
</svg>スタイルは、HTMLのスタイルと同様に、それ自身の <style> の”島”に移すこともできます。上の例で、 width と height をSVG内部の <rect> 要素に設定した場合、CSSではこれらの属性を <rect> 要素上に設定することはできません。現状ではそれは不可能なためです。
最新SVG 2の仕様では、SVGスタイル付けのプロパティのリストは拡張され、コンテントサイズや、 x 、 y 、 width 、 height 、 cx 、 cy 、 r に限らない多くの位置プロパティも使えるようになりました。新リストは SVG 2の仕様に掲載 されています。
これらのプロパティの中には既にChromeで使えるものもありますので、興味があればテストしてみてください。
CSSで設定できるプロパティがあり、その値をアニメーション化することができるなら、これのプロパティはCSSでアニメーション化できて当然です。ですから、これらプロパティが適用されたSVG要素もCSS経由でアニメーション化できるはずです…。
SVG要素におけるCSSのトランジションとアニメーション
実際、CSSアニメーションとトランジションをCSSのアニメーション化が可能なSVGプロパティに適用することができます。例えば、触れると色が変化するアイコンといった、かっこいいホバーインタラクションや、2次元と3次元の要素がどちらも変化する複雑なアニメーションも作れるのです。
CSSを使い、ホバーによって色が変わるSVGアイコンを表現するなら、次のようなコードが思い浮かぶでしょう。
.icon—twitter {
fill: #eee;
}
.icon—twitter:hover {
fill: #55ACEE;
}実際、CSSはホバーインタラクションなどのシンプルなアニメーションやインタラクション作成には最適で、一般的にパフォーマンスも非常に良いです。しかし現在のところ、SVG要素上のCSSアニメーションは、ハードウェアアクセラレーションを一部のブラウザで行っていないので、ブラウザによっては動かないことがあります。つまり、まだパフォーマンスは上がる可能性があります。これからの改良に期待しましょう。
また、CSSアニメーション（ @keyframe などを使用）はIE9以下では動きませんので注意してください。
SVG要素におけるCSS変形
印象的な効果には、回転、スケール、ゆがみ、または単純に要素を置き換えるアニメーション変形機能が多く使われています。変形アニメーションを使った簡単な例として、これもNoah Blohが作成したお天気アイコンセットをCodepenで見てください。
CSSを使ってアニメーション化したSVGアイコン 作者：Noah Blon（ @noahblon ）、 CodePen
いくつかのアイコンでは、図形のグループ（雨粒など）をスタート地点である”雲の中”から無限に降ってくるように変形したり、回転変形を使って太陽そのものを回転させたりしています。
上記のデモをFirefoxで表示させると、いくつかのアニメが壊れていることに気づくでしょう。それには理由があります。
CSSを使ったSVG要素のアニメーション化は、CSSを使ったHTML要素のアニメーション化に似ています。ただ、変形においては、大きな違いが1つあります。HTML要素の変形基点の初期値は (50%, 50%) であり、これは要素の中心です。一方、SVG要素の変形基点はそのときのユーザの座標系の原点にあり、これは描画領域の左上のコーナーにある(0, 0)点です。
では、HTML <div> 要素とSVGの <rect> 要素があるとしましょう（赤い円は変形基点の位置を表しています）。
<!DOCTYPE html>...<div style=“width: 100px; height: 100px; background-color: orange”> </div><svg style=“width: 150px; height: 150px; background-color: #eee”> <rect width=“100” height=“100” x=“25” y=“25” fill=“orange” /></svg>両方を変形基点の初期値を変えずに45度回転させるとすると、次のような結果になるでしょう。
ですから、SVG要素をその中心を基点に動かしたい場合は、 transform-origin プロパティを使って明確に変形基点を設定する必要があります。
rect {
transform-origin: 50% 50%;
}SVG要素の変形基点を変えると、次のような結果になります。
というわけで、現状、このようなアニメーションはFirefoxでは動かないのです。よく 知られたバグ です。
Noahのデモは、動かしたい要素の中心に変形基点を設定する際、パーセンテージ値を使っているので、Firefoxでは壊れてしまうのです。Firefox上で思いのまま回転させるには、絶対値（ピクセル、 em など）で変形基点を設定するとよいでしょう。その際、 基点はSVG描画領域のユーザの座標系に相対する値 で決めることになります。例えば、変形基点 50px 50px とは、SVGの左上のコーナーから 50px 50px の点を指すのであり、要素そのものから測った位置ではありません。
多くの場合、このような方法で変形基点を設定したくはありませんが、Firefoxで機能させるには、今のところこのような作業が必要なのです。
Firefoxの問題に加え、IEとOperaは、全てのSVG要素でCSS変形を受け入れないという問題があります。更に多くの懸念点があるのですが、これについては後の項で述べます。
CSSを使ったSVGのアニメーション化によって、より複雑なアニメーション効果を生み出せるのですが、その素晴らしさは変形効果によるところが多いのです。そしてCSS変形は、現在のところ制約やバグ、ブラウザによって表示がまちまちだという問題を抱えています。
それでも、CSSで実現できるのは、簡潔な色の時間的変化や変形要素だけではありません。
CSSを使ったSVGの線画効果
インパクトが強く人気の高いSVGアニメーション効果といえば、 線画効果 でしょう。この効果を使ったサンプルはまずXboxのWebサイトで紹介され、Vox mediaブログの この記事 で解説されています。これがそのアニメーションです。
この効果はアニメーション化された2つの特定のSVGプロパティ、すなわち stroke-dasharray と stroke-dashoffset で作られています。1つ目のプロパティは、ダッシュとその間のスペースの長さを指定することで、実線”border”(stroke）を破線に変える機能を持っています。2つ目のプロパティはオフセット、つまり線がどこからどの長さまで伸びるかという位置を変更できます。これらプロパティはCSSの中で使うことができ、アニメーション化が可能です。
手元にあるパスを長いダッシュに変換し、さらにパスに沿ってそのダッシュのオフセットを変換してアニメーション化することで、CSSとSVGパスだけを使った線画の効果を出すことができます。
この効果は、Jake Archibaldが書いているブログの とある記事 の中で初めて紹介されました。記事には、このテクニックがどのように機能するかを説明するためにインタラクティブなデモも用意されています。下記の画像は、2つのプロパティの効果をお見せするために、実際にデモを行い記録したものです。
ご自身でデモを行ってみたい方は、Jakeの記事をチェックしてみてください。
このテクニックのコツは、パスの正確な長さを測るところにあります。それが分かれば、パスを同じ長さのダッシュに変換することができ、（後ろにある）パスの可視境界線の外側にダッシュを”引っ張り出す”ために、その長さをオフセット値として使うことができます。そしてそれをアニメーション化するのです。
CSSでこの効果を出すには、次のような式になります。
#path {
stroke-dasharray: pathLength;
stroke-dashoffset: pathLength;
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2s linear;
}
svg:hover #path{
stroke-dashoffset: 0;
}UI要素をより表現豊かにしたい場合に、線画効果を使うととても効果的です。Codropsには、一般的なUI要素やインタラクションをより良くするために、このテクニックを使った数多くの実例がありますが、ここでは下記の2つを紹介しておきます。
また、アニメーション化したいパスの正確な長さを知ることができないケースも多くあります。アニメーション化しようとしているパスが多くなると、一つ一つの長さを確認し、設定するのが面倒になってくるでしょう。JavaScriptを使えば、この問題は解決できます。
実際、CSSやSMILのアニメーションで制約されている多くのことがJavaScriptでは対応可能となっています。特にアニメーションのタイミングやシンクロの機能が有効です。
JavaScriptを使ったSVGアニメーション
JavaScriptを使ってSVGアニメーションを作成する場合も、SMILやCSSを使う場合と同様の機能を得ることができます。また、JavaScriptではそれ以上のことが可能になっています。私が思い付く中で、ただ一つ制約と感じることがあるのですが、これについては、次の項で詳しくお話します。
CSSを使って線画を作成した前項の例を取り上げてみましょう。JavaScriptでも同様のことが可能です。さらに、SVG DOMのメソッド getTotalLength() のお蔭で、単純に作業しているパスを選択し、このメソッドを使って値を割り出すことで、パスの長さを常に知ることができます。
var path = document.querySelector(‘.drawing-path’);
path.getTotalLength();
//set CSS properties up
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
//set transition up
path.style.transition = ‘stroke-dashoffset 2s ease-in-out’;
// animate
path.style.strokeDashoffset = ‘0’;非常にシンプルなアニメーションでない限り、ほとんどの場合、JavaScriptを使用してこの効果を得ようと思うでしょう。いくつかのプラグインがすでに存在しますので、2つ紹介しておきます。 例1 と 例2 。例2は、とても人気の高いアニメーションライブラリである Greensock 用のプラグインです。
もし、vanilla JavaScriptを使ってゼロからSVGアニメーションを作成するとなると、いくつかのブラウザの不整合や、先にお話ししたバグに直面することになります。しかし、公開されているいくつかのSVGアニメーションライブラリでは、この問題に対処しているので、問題を回避することができます。
世の中には数多くのSVGアニメーションライブラリが存在しますが、最も人気の高い3つのライブラリを紹介します。 Greensock 、 Snap.svg 、そして Velocity.js です。SVGアニメーションに馴染みのある方であれば、他にも思い当たるライブラリがあると思いますが（例えば、 D3.js など）、今日では、上記3つが一番人気の高いライブラリと言えます。
JavaScriptでは、SVGパスデータ（ d 属性）もアニメーション化することができます。これによって、まさにあなたのアニメーションやUIを次のレベルへと導く、見事なアニメーションを作成することが可能になります。
例えば、下記のアニメーションは、CodropsのManoela Ilicによって作成された効果で、パスの図形（黄緑色の範囲）をアニメーション化することによって再現されたMac OS Xのジニーエフェクトです。
より独創的な効果の作成も可能です。 リアルなインターフェース効果 を作り上げることに加え、要素のありかをユーザに知らせる手助けをするために、適したアニメーション効果を活用することによって、ユーザインターフェースの全般的なユーザエクスペリエンスを改良することができます。
CSSでも対応が可能なように、JavaScriptでも簡単なトランジションやアニメーションが作成できます。しかもブラウザのバグなしに、です。例えば、Greensockでは、クロスブラウザに対応した方法を提供しています。IEをサポートしてないCSSのプロパティアニメーションの代わりにSVG属性のアニメーションを使用することによって、Internet Explorerでこれらのアニメーションを作成する適切なテクニックを提供しています。
Web Animations API であるJavaScript animation APIは、SMILが提供している機能の（全部ではありませんが）いくつかのギャップを埋めるためにあります。これは素晴らしいことではありますが、SVGを画像として取り込んでいる場合においては、依然として制約があります。以下で詳しく説明していきましょう。
SMIL vs CSS vs JavaScript
私がSMILを使わなくなった、また使用を推奨しない主な理由は、SMILが持つ現在そして将来のブラウザサポートの状況にあります。すぐにそのブラウザサポートが変更されるといった傾向ではないので、更に 多く のブラウザがサポートするようにならない限り、将来、SMILの使用率はもっと減少していくでしょう。
CSSにおいては、全部ではないのですが、多くのSVGプロパティをアニメーション化できるというだけです。 現時点で、 パスの d 属性データといったような属性をCSSではアニメーション化できません。つまり、当分の間は、CSSを使った図形が移り変わる効果や、ついでに言えば、どのパスアニメーション効果も構築することはできないということです。
言うまでもありませんが、バージョン11以前のInternet Explorerでは、SVG要素のCSSアニメーションそしてトランジションをサポートしていませんでした。また、最新のMS EdgeブラウザでもCSS変形をサポートしていません。それに CSSを使ってSVGアニメーションを行う際に問題となる多くのブラウザの不整合 と併せて、FireFoxでの変形に関する元々のバグを考慮すると、機能の根幹に関わらないシンプルなアニメーションに対してのみCSSを使用することを推奨します。もし、画像やページ、アプリケーションのアニメーション化が極めて重要なのであれば、JavaScriptを使用することを私はお勧めします。
注記： CSS-Tricksに掲載されている記事の中で、SVG要素に対してCSS変形を行う際のブラウザのバグと不整合に関して、Jack Doyleが詳細に説明しています。 こちら からその記事をお読みいただけます。
とはいえ、CSSはSVG SMILアニメーションを生成する多くの機能を持ち合わせています。今日では、パス機能と併せてSMILの動作をCSSに取り込む CSS Motion Path Module があります。CSSを使ってパスと一緒にSVG、そしてHTML要素をアニメーション化することができるのです。以前はWeb Animations APIにもこの機能が含まれていましたが、後にCSS Motion Path Moduleが発表されると、この機能は削除されてしまいました。
しかしながら、SMILが軽視されている今、CSSはギャップを埋めるために、Motion Path Module以上のものが必要になってきます。なぜなら、CSSでは依然としてSVGパスのアニメーション化ができない上に、複数のアニメーションを同時に動かすためのシークエンスやアニメーションをグループ化することができないからです。SMILアニメーションのトリガーやシンクロ機能は素晴らしいものなのですが、この件に関して言えば、CSSは機能を存分に発揮することができていません。
このようなことから、SVGをアニメーション化するツールとして現在私が信頼しているのがJavaScriptというわけです。そして、私がライブラリとして選んでいるのがSVGアニメーションに特化した多くの機能を持つGreensockです。ブラウザの不整合も気にすることなくSVGアニメーションを作成することができます。更にGreensockは、メソッドやプロパティを多く追加しており、SVGでの直感的ではない標準アニメーションの振る舞いに対処することで、期待している動作を実現するアニメーションが作成できます。
Snap.svgは、SVGのマニピュレーション向けとして頼りになるライブラリで、jQueryと同じように適用することができます。しかし、Greensockのタイムライン並びに他の機能は、複雑なSVGアニメーションを作成する際にはとても強力です。
とは言え、SVGをアニメーション化する際には、JavaScriptには重大な制約があります。セキュリティの点から、 <img> , <picture> やCSSバックグラウンド画像を使って画像として取り込んだSVGは、JavaScriptを使ってアニメーション化することができません。
どういうことかと言うと、画像としてSVGを取り込んだ場合、その上に定義したどのJavaScriptアニメーションも機能しません。これは、CSSとSMILアニメーションだけで機能するのですが、CSSについては、 <svg> の外ではなく中で定義しなくてはなりません。 :hover といったインタラクションの場合は、どちらでも機能しないでしょう。
SMILでは、複雑なパスアニメーションを作成することができ、画像として取り込んだSVGで機能もします。しかし、SMILは廃止される可能性がありますし、CSSではこれを実現する能力がありません。CSSがSMILに代わる機能を備えるのを待つ必要があり、それまでは、SVGを画像としてアニメーション化する場合は、ごく限られた範囲で行うしかありません。
MozillaのBrian Birtlesが書いた 記事 には、最も一般的なSMILの使用事例が紹介されています。また、SMILの廃止によって生まれるギャップを埋めるためのCSSのいくつかの機能をリストアップしています。しかし、そのギャップが埋まるまでは、SMILそして画像にあるIEやChrome向けのドロップサポートを使用することができます。または、単純にCSSを使ったシンプルなアニメーションに落ち着くか、素晴らしい効果を作成したいのであれば、JavaScriptを使用して、 他に使えそうな取り込みテクニック使って 、SVGを取り込むかのどちらかです。
それぞれのアニメーションテクニックで何が出来るか出来ないかに加え、Sarah Drasnerが執筆した 素晴らしい記事 では、それらのテクニックによってアニメーションがどのように機能するかについて述べています。例えば、異なるアニメーションテクニックをベンチマークで重み付けしたり、CSSやSMIL、複数のJavaScriptアニメーションライブラリなどで比較してみたりしています。詳細については、記事をご覧になってください。
最後に
SVGは、多くの意見が交換され、多くの開発者が携わり、そして毎日のように変化が起こっている、壮大な世界です。自分の意見や要求に重み付けをし、そして作成段階、最適化、取り込み、最終のアニメーション段階ごとに自分に最適なテクニックを選択するようにしてください。この記事が、現在のSVGアニメーションでは何が出来て、何が出来ないかの概要をつかむ手助けになれば幸いです。あなたが次に携わるプロジェクトでは、容易に最適なアニメーションテクニックを選択できることを願っています。全ての状況をここでは語れていませんが、最適なSVGアニメーションツールを選択する上で、この記事が参考になれば光栄です。
お読みいただき、ありがとうございます 
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
- Twitter: @yosuke_furukawa
- Github: yosuke-furukawa
関連記事
