Web界隈におけるアニメーションの歴史を紐解くと、まずはGIFアニメから始まります。
まるでノートのページの隅を指でめくっているような原始的なパラパラマンガのようですが、静止画に比べれば情報量が非常に多く、Web広告などでも次々に採用されていきました。

さらに、Flashを使ったアニメーションや、CSSを使ったアニメーションなど、動きを見せるテクノロジーは次々にやってきます。
そして近年大きく注目を集めているのが、SVGを使ったアニメーションです。

ベクター画像を使ったSVGアニメーションは、GIFのように画像の劣化もせず、Flashほど重くなく、CSSアニメーション以上に柔軟で自由自在です。
ただし、SVGはXML状のコードで再現されるので、初心者にとっては若干敷居が高いというのも事実です。

そこで今回は、SVGアニメーションを作る方法をまとめていきます。
文字で作られているグラフィックという性質上、実はSVGアニメーションを作る方法はいくつかあります。
その中で、自分が最適だと思う方法でSVGアニメーションを作成してみてはいかがでしょうか。

SVGについておさらい

SVGとはScalable Vector Graphicsの略で、画像フォーマットのひとつです。

もともとWebの世界では、JPEGGIFPNGといったビットマップ形式(ドット状・ラスタ形式とも言います)のデータが主流でした。
しかし、XMLをベースにマークアップしたベクター形式であるSVGが登場し、Illustratorで編集するベクターデータと同じように拡大や縮小を繰り返しても画像の劣化が起こらない、という特徴があります。

また、通常画像の色を変えたりするには専用のグラフィックソフトを用意する必要がありますが、SVGは厳密には画像データというよりもテキストデータなので、OSに標準で付属しているテキストエディタさえあれば簡単な画像の修正であれば瞬時に行うことができます。

参考:
SVGファイルとは?基礎知識と作成・変換方法を解説

SVGアニメーションを作る方法まとめ

1. SVGを直接マークアップで作成する

コーダーやマークアップエンジニアのように、HTMLに慣れ親しんでいる人にとって一番てっとり早いのは、マークアップで作成する方法かもしれません。

手順としては、HTMLファイルにSVGタグでマークアップして図形を描画」(グラフィック作成)CSSやJavaScriptを使ってアニメーションを実装」(動きを生成)という流れになります。
見た目と動きをHTMLCSS・JavaScriptで分業させる、というのが基本スタイルになります。

例えば、簡単な円を作成する場合、HTMLに次のようなコードを挿入します。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="150" viewBox="0 0 500 150">
  <circle cx="150" cy="200" r="100" fill="#0060e6"></circle>
</svg>

svgタグにあるxmlns属性は、このタグがSVG要素であることを宣言するものです(ただし、URLをブラウザで入力して開いても何も表示されません)。
HTMLタグに埋め込む際には、xmlns属性は省略することもできます。
また、widthheightはカンバスの大きさ、viewBoxは座標を決めるためのものです。

2行目に挿入されたcircleタグは、縁を描くためのものです。
中心座標と半径、塗りを属性で指定することができます。

実際にはSVG関連のタグはたくさんあります。
以前、下記の記事でSVG関連のタグをまとめておりますので、下記もご参照ください。

参考:
もっと早く知りたかった!SVGを扱うなら知っておきたいタグ&プロパティまとめ

これに対して、CSSでtransitionなどのプロパティを指定して、SVGアニメーションを作成することができます。
図形だけSVGで作成しておき、アニメーションに関しては外部ライブラリを利用する、といった方法もあります。

参考:
ホームページにアニメーションを実装するライブラリ&プラグイン12選

2. SVGファイルを作成して画像として埋め込む

SVGの面白いところは、テキストファイルでもありながら画像ファイルとしても取り扱えるという点です。
そのため、コードを外部ファイルとして作成し(拡張子は「.svg」)、PNGやJPEGを埋め込むのと同じようにimgタグで埋め込むことができます。

<img src="path/image.svg" alt="" width="320" height="320">

もちろん、画像として取り扱うことが可能だということは、CSSのbackground-imageプロパティで背景として指定することもできます。

background-image: url(path/image.svg);

あるいは、あまり利用頻度はないでしょうが、外部オブジェクトとしてobjectタグまたはembedタグで埋め込むこともできます。

<object data="path/image.svg" width="150" height="150" codetype="image/svg+xml">代替コンテンツ</object>
<embed src="path/image.svg" width="150" height="150" type="image/svg+xml">

3. Illustratorで作成する

Adobe Illustratorはベクターを扱うことができるソフトの中でもシェアが非常に高いので、すでに利用している方もいらっしゃるでしょう。
もしお持ちの場合には、Illustratorを使ってSVGを描画することもできます。


画像引用元:Adobe

通常通り、アートボードを作成したのち、SVG形式として保存すれば完了です。
ただし、この方法では図形を描画することはできますが、アニメーションが加えられていません。


画像引用元:Smashing Hub

アニメーションを加えるために、CSSや外部ライブラリで挙動を加える必要がありますが、Adobe CreativeCloud会員であれば、Adobe Edge Animateというアニメーション用のソフトウェアを使ってアニメーションを作成することもできます。

4. SVGライブラリを使う

snap.png
スクリーンショット:2017年9月

いずれかの方法でSVG画像を生成することができれば、JavaScriptなどをベースとしたSVG専用のアニメーションライブラリを使う方法もあります。

有名なものにはSnap.svgSVG.jsvivus.jsTwo.jsBonsaiJSなどがあります。
いずれも軽量で、簡単なJavaScriptに対する理解があれば、簡単に部品を動かすことができます。

5. SVGアニメーション作成ツールを使う

初心者が扱いやすく、最も敷居が低いものとしては、SVGアニメーションツールを使いこなす方法です。


スクリーンショット:2017年4月

最も使いやすいフリーソフトのひとつはKeyshapeと呼ばれるSVGアニメーション用のソフトウェアで、MacでSVG画像の作成からアニメーションの実装まで、ワンストップで行うことができます。

参考:
ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説

まとめ

今後、iPhone Xに代表されるようにますます高解像度になっていくため、ロゴデザインをはじめとして、Webの世界でもますます多くのWebサイトがSVGを採用するようになるでしょう。

この動きに乗り遅れないように、自分にあった方法でSVGアニメーションを作成する方法を学んでおきましょう。