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-logo-anime01

動かす場所を見つけよう

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

svg-logo-anime02

アニメーションタグとオブジェクトを関連させる方法は、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の閉じタグの前に置いて、サイトのロゴを差し替えてみました。

アニメーションは動きすぎると煩いので、始まるまで5秒かかるようにしています。
拡大しても綺麗ですね。
いかがでしょう。
※SVGアニメーションは、IE9に対応していないです。

簡単に書きましたが、かなりSVG奥が深いです。
スマホの普及によりアイコン画像などSVGのものが増えています。

では、そんな感じで、またねー。