SVGについて学びました。

2014-06-23
SVG

SVGについて、機能は魅力的ですが、使いどころは分かりにくかったので、学んでみました。
機能を一気に説明できない奥深さなので、今回はWEBサイトのロゴをSVGに差し替え、簡単なアニメーションを実装するまでやってみます。

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）は以前からありましたが、2011年にIE9が対応したことにより広がりました。当時、SVG 女子は話題になりましたね。 SVG 女子また、グラフデータの視覚化を容易にできるライブラリ、D3.js（Data-Driven Documents データ・ドリブン・ドキュメント）にもSVGが使われています。 D3.js – Data-Driven Documents

SVGのメリット・デメリット

それでは、SVGの持つメリットはなんでしょう。

SVGのメリット

拡大縮小可能なグラフィックス 拡大縮小しても劣化しないベクター形式のデータなので、解像度の異なる環境や印刷において高品質です。 テキストエディタで編集が可能 SVGをテキストエディタで開くと、ソースが見えます。 XML形式で記述されており、特殊なアプリケーションを使用しなくても書き換えることができます。 インタラクティブな操作、アニメーションが可能 アニメーションタグ、JavaScript、CSSによるアニメーションが可能です。

SVGのデメリット

データによっては、高負荷になる可能性 SVGだけの話ではありませんが、ベクターデータは大きさと容量が比例しません。表示のさせ方によっては、SVGの方が良いというわけではありません。 ブラウザの実装による差異 ブラウザによって実装されている機能が異なります。特にfilter要素に関わる機能は、動かないことが多いです。

SVGはこう使おう

アイコンやロゴなど、ベクターデータに適した画像に対して、IMGタグのGIF／JPG／PNGの代わりに、SVGにするのが良さそうです。画期的ではないですが、今までの画像と使い勝手が変わらないので、違和感なく実装できます。特にRetinaディスプレイには相性が良いので、スマートフォン向けにどんどん使って良いでしょう。もし、必要ならアニメーションタグでワンポイントつけるのもよいでしょう。今回は触れませんが、インラインで実装すると、アニメーションタグとは別に、JavaScriptによる動的な操作やCSSによるダイナミックなアニメーションが実現できます。

ロゴをSVGに、そして動かそう！

それではロゴをSVGに差し替えて、アニメーションをさせてみます。まずは、Illustrator（SVGで保存できるアプリケーション）でロゴのデータを作成します。（XMLで書かれていると言っても、テキストエディタでロゴを描くことは難しいでしょう） Illustrator以外にもSVGを扱えるアプリケーションはあります。アプリケーションが手元にない方は、試してみるのも良いでしょう。

SVGを書き出そう

Illustratorでは、保存する際に形式をSVGに変えることで、作成することができます。アートボードのサイズで書き出されるので、アートボードピッタリにしておきましょう。

動かす場所を見つけよう

シンプルなデータであれば、どこの記述がどの絵を指しているのか、分かるかもしれません。もしも、複雑であれば、SVGをGoogle Chromeで開いて、デベロッパーツールで見ましょうオブジェクトのタグが分かりやすくなるので、見つけたらテキストエディタで開いて、関連付けするためにID名を付けます。

アニメーションタグとオブジェクトを関連させる方法は、2種類あります。

ID名で関連付けする
オブジェクトタグを親にして、アニメーションタグを入れる

IDであれば、好きなところに記述できるので（SVGの閉じタグの中であれば）、今回はIDで行います。

アニメーションタグを入れる

アニメーションさせるには、5種類あるアニメーションタグと、そのタグに入れる属性を設定すれば動きます。 アニメーションタグ

animate	要素の (x, y など) のアニメーション
set	要素を期間中保持しておく。例えば、表示・非表示などアニメーションしないものでもsetであれば、設定できる
animateMotion	モーションパスに従うアニメーション
animateColor	色のアニメーション。将来のSVGのバージョンで削除される可能性があります。animateの使用を推奨されています。
animateTransform	トランスフォーム属性 (translation、rotationなど) のアニメーション

アニメーションタグの属性 アニメーションタグの属性は、タグによって異なりますが、下記などはよく使う属性です。

id	アニメーションのID名
xlink:href	関連付けしたいオブジェクトのID名を設定
attributeName	アニメーションさせたい属性名（x,yなど \| animateTransformなら必ずtransform）
begin	アニメーションを開始するタイミング（数字s,数字msなど \| id名.begin \| id名.end \| id名.click 他）
from	アニメーションの最初の値
to	アニメーションの最終的な値
dur	アニメーションする時間（数字s,数字msなど \| “indefinite”）
repeatCount	アニメーションを繰り返す回数（数字 \| “indefinite”）

こんな感じで動かしました

とりあえず、ペン部分なら動いてもあまり違和感がないかな、と思ったので、その辺りを動かしてみました。下記のタグをSVGの閉じタグの前に置いて、サイトのロゴを差し替えてみました。

<animateTransform id="penDown" xlink:href="#logoPen" attributeName="transform" begin="5s; penUp.end+5s" dur="1s" type="translate" from="0 0" to="0 -50" repeatCount="1" />
<animateTransform id="penUp" xlink:href="#logoPen" attributeName="transform" begin="penDown.end" dur="1s" type="translate" from="0 -50" to="0 0" repeatCount="1" />
<animate id="PenShadowRX" xlink:href="#logoPenShadow" attributeName="rx" begin="5s; PenShadowRXRe.end+5s" dur="1s" from="15.919" to="0" repeatCount="1" />
<animate id="PenShadowRY" xlink:href="#logoPenShadow" attributeName="ry" begin="5s; PenShadowRYRe.end+5s" dur="1s" from="2.74" to="0" repeatCount="1" />
<animate id="PenShadowRXRe" xlink:href="#logoPenShadow" attributeName="rx" begin="PenShadowRX.end" dur="1s" from="0" to="15.919" repeatCount="1" /> 
<animate id="PenShadowRYRe" xlink:href="#logoPenShadow" attributeName="ry" begin="PenShadowRY.end" dur="1s" from="0" to="2.74" repeatCount="1" />