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(塗りつぶし)プロパティで制御ができるようになっています。

CSSアニメーションの設定

それではまず、SVGアニメーションを動かすための土台に設定を行っていきます。
SVGとクラス名を揃え、fill、strokeの設定を行っていきます。
この後設定するアニメーション名を「hello」として、アニメーションの設定も忘れずに行います。

.st1{
  fill:#0060e6;
  stroke:#0060e6;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 4s ease-in 0s;
  animation: hello 4s ease-in 0s;
}

土台の設定ができたら、今度はアニメーションの設定を行います。

  @-webkit-keyframes hello {
    0% {
      stroke-dashoffset: 2000;
      fill:transparent;
    }
    40% {
      stroke-dashoffset: 2000;
      fill:transparent;
    }
    50% {
      fill:transparent;
    }
    100% {
      stroke-dashoffset: 0;
      fill:#0060e6;
    }
  }

ここまでに「stroke-dasharray」と「stroke-dashoffset」が登場してきましたが、これはそれぞれ線の「感覚」と「位置」を指定していくものです。
パスの長さよりも多めに指定しても大丈夫なので、デモでは多めに2000を設定しています。

デモ

以上のように設定すると、このように線が表示され、その後中の塗りが行われるアニメーションが完成します。
もちろん、数値などの設定を変えることで、簡単に設定の変更を行うこともできます。

See the Pen svganime by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

(アニメーションがうまく表示されない場合は「Rerun」を押して再起動してみてください)

まとめ

この他にも、hoverをきっかけにアニメーションさせたり、animationではなくtransitionを使用することも可能です。

SVGは現在、多くのブラウザで対応しており、CSSを設定してレンスポンシブ対応すれば、スマートフォンでも表示することが可能です。
また、今回はロゴを使った簡単なアニメーションで動かしてみましたが、その他にも図形を使って制作されたキャラクターのアニメーションなども動かすことができます。

SVGでアニメーションを実装するのが簡単だと感じてくれたらうれしい限りです。
ぜひ、SVGを使ったアニメーション作成に挑戦してみてくださいね。