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

2018年05月28日

動画・映像制作

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">