見えないペンで描いてるみたい！SVGアニメーションを作る方法

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

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

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

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

SVGについておさらい

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

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

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

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

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

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

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

手順としては、「 HTML ファイルにSVG タグ でマークアップして図形を描画」(グラフィック作成)→「 CSS や JavaScript を使ってアニメーションを実装」(動きを生成)という流れになります。
見た目と動きを HTML と CSS ・ 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属性は省略することもできます。
また、widthとheightはカンバスの大きさ、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ライブラリを使う

スクリーンショット：2017年9月

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

有名なものにはSnap.svgやSVG.js、vivus.js、Two.jsやBonsaiJSなどがあります。
いずれも軽量で、簡単な JavaScript に対する理解があれば、簡単に部品を動かすことができます。

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

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

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

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

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

まとめ

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

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