*SVG(Scalable Vector Graphics)*と呼ばれる画像形式が注目を集めています。

PNGやJPG、GIFなどのようなビットマップ形式のデータでは、拡大すると縁がギザギザしてしまいます。
一方、SVGのようなベクター形式のデータは、ピクセルに色を塗るのではなく数式によって画像を表現できるので、拡大してもハッキリと見ることができます。

さらにSVGの使用を加速させている理由が、SVGにはGIFのようにアニメーションを表示できるということです。
アニメーションは動きがある分ユーザーの目を引くことができますが、それだけでなく滑らかで美しいアニメーションになるので、SVGアニメーションを使っているだけで他のサイトに比べて大きな差別化となります。

SVGアニメーションは作るのが難しいと思われがちですが、HTMLに慣れている人であればそれほど難しいものではありません。
なぜなら、SVGは一般的にXML形式のデータで保存されているので、コツさえつかめれば、特別なソフトなどがなくとも、簡単にアニメーションを加えることができるのです。

今回は、簡単に実装できるSVGアニメーション実装の基本をご紹介します。
複雑なアニメーションを実装することもできますが、そのためにはまず基本を押さえておくことが非常に重要になります。
手順を理解して、ユニークなアニメーションを作成していきましょう。

5分でできるSVGアニメーションの基本

animation.gif

SVGは*「いくら拡大してもギザギザしない」というメリットがありますが、その他にも「テキストベース(XML形式)で編集ができる」「CSSやjQueryを含むJavaScriptで操作することができる」*という他の画像形式にはない利点があります。
この後者の点を活用することで、CSSやJavaScriptを使ってアニメーションを表示することができるようになります。

ただし、この実装方法は、InternetExplorerでは対応していません。
IEで表示する場合はJavaScriptなどを使って代替画像を用意するのがよいでしょう。

SVGファイルの中身

ここでは、最も簡単なCSSアニメーションを使った実装方法をご紹介していきます。

SVGは、HTMLと同じような形式(XML形式)で出力されたデータを使って描画をしているため、各種タグの集合になっています。
そのsvgタグで囲まれた部分の中にあるpathやrect、circleタグが、SVGの実際の構成要素になります。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 80" style="enable-background:new 0 0 200 80;" xml:space="preserve">
<style type="text/css">
.st0{enable-background:new    ;}
.st1{fill:none;stroke:#6183FF;}
</style>
<g class="st0">
<path class="st1" d="M40.3,61.1V37.6h-4v-3.6h4v-2.9c0-1.8,0.2-3.2,0.5-4c0.4-1.2,1.2-2.1,2.3-2.9c1.1-0.7,2.7-1.1,4.7-1.1 c1.3,0,2.7,0.2,4.3,0.5l-0.7,4c-0.9-0.2-1.8-0.3-2.7-0.3c-1.4,0-2.4,0.3-2.9,0.9c-0.6,0.6-0.9,1.7-0.9,3.3v2.5h5.3v3.6h-5.3v23.4 H40.3z"/>
<path class="st1" d="M72.2,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4c-2,1.5-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6 s-3.5-5.8-3.5-10.2c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7S77,43.1,77,47.5c0,0.3,0,0.7,0,1.2H56.9 c0.2,3,1,5.2,2.5,6.8c1.5,1.6,3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3C70.5,55.7,71.5,54.3,72.2,52.4z M57.2,45h15.1 c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6c-2.1,0-3.9,0.7-5.3,2.1C58.1,40.8,57.3,42.6,57.2,45z"/>
<path class="st1" d="M82.6,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2 c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9c-0.8,0.6-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H82.6z"/>
<path class="st1" d="M99.9,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2 c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9s-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H99.9z"/>
<path class="st1" d="M135.7,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4s-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6s-3.5-5.8-3.5-10.2 c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7s3.4,5.9,3.4,10.4c0,0.3,0,0.7,0,1.2h-20.1c0.2,3,1,5.2,2.5,6.8 s3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3S135,54.3,135.7,52.4z M120.7,45h15.1c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6 c-2.1,0-3.9,0.7-5.3,2.1S120.9,42.6,120.7,45z"/>
<path class="st1" d="M156.1,57l0.7,4c-1.3,0.3-2.4,0.4-3.5,0.4c-1.7,0-2.9-0.3-3.9-0.8s-1.6-1.2-1.9-2.1s-0.6-2.7-0.6-5.4V37.6 h-3.4v-3.6h3.4v-6.7l4.5-2.7v9.4h4.6v3.6h-4.6v15.8c0,1.3,0.1,2.1,0.2,2.5s0.4,0.7,0.8,0.9s0.9,0.3,1.6,0.3 C154.7,57.1,155.3,57.1,156.1,57z"/>
</g>
</svg>

これらのタグは、stroke(線)やfill(塗りつぶし)プロパティで制御ができるようになっています。