今回は、いろんなサイトに使われてきているSVGを触ってみたいと思います。
アイコンに使われる他に、アニメーションのあるグラフィック等、インタラクティブ性もあったり。
SVGに関して知らないことが多い（98％ぐらい）ので、ここから少しずつ覚えていきたいと思います。

SVGとは

Scalable Vector Graphicsの略で、XMLをベースとした、2Dベクター画像記述言語だそうです。
jpgやpng、gifのようなビットマップ画像と違いベクター画像なので、大きさが変わっても綺麗に表示できるのが特長。

IllustratorでSVGを書き出す

Illustratorで作ったイメージを別名で保存します。
保存形式のプルダウンから「SVG(*.SVG)」を選択します。

今回は特に何もいじらず「OK」を押すと、ペンギンのSVGが書き出されます。

サンプルはこちら[penguin_svg.svg]

ブラウザでSVGを開くと、画像のように表示されます。

ソースはこのようになっています。

少し動かしてみる

先ほど書きだされたコードをHTMLに貼ります。

コードの「circle」部分を上のソースへ差し替えます。

[サンプルHTML]

ブラウザを確認すると目がでかくなったり小さくなったりします。
なにこれ。

まとめ

アイコンで利用するだけならともかく、アニメーションが絡むと覚えないといけないところが多いですね。
ただ、覚えたら面白いものが出きそうだとワクワク感があります。
jQueryでアニメーションを制御できるものもあるらしいので、調べてみたいとおもいます。