YUIDEA

YUIDEA

MENU

技術

Date: 2016.06.06

Author: osa.

SVGでアニメーション(前編)

SVGファイルに対応したブラウザが増えてきたこともあり、SVG画像を使用しているWebサイトが散見されるようになりました。
当サイトのトップページのメインビジュアルもSVG画像を設定しています。
解像度の高いディスプレイ対策やレスポンシブ対応など、都度それに合わせた画像を用意する必要なく、SVG1枚で済ませられるのは大変便利です。

そして、SVG画像はアニメーションも可能です。
せっかくなので、何か効果をつけてみようかと色々調べてみたところ、思っていたよりもわりと簡単に実装できることがわかりました。

今回は、備忘録の意味も含め、SVGの書き出し基礎からアニメーション効果の実装までをご紹介したいと思います。

制作フロー

大まかな制作の流れとしては

  • Illustratorで絵を作る
  • svg形式でファイルを書き出す
  • テキストエディターでSVGファイルに効果を追記する

という工程になります。

1.Illustratorで絵を作る

Illustratorでベクター画像を作っていきます。
制作時のコツとして、動きをつけたい要素を含むレイヤーに、名前をつけておきます。ここでつけたレイヤー名が、SVGファイルに書き出したとき、該当要素にIDとなって付随しています。


作り込まれた画像はレイヤーの量が膨大になるため、書き出されたソースから効果を付けたい場所を見つけるのは至難のワザです。そんな苦労をなくすために、効果をつけたい要素にだけでもIDを追加しておきます。

2.svg形式でファイルを書き出す

画像が完成したら、SVG形式で保存します。「別名で保存」→「ファイルの種類」でSVGを選択します。

オプションダイアログでは、「SVGプロファイル」をSVG1.1になっていることを確認。他はデフォルトのままでも特に問題はありませんが、自分は次のように設定。

「フォント・文字」→SVG
「編集機能の保持」→チェックはずす
「小数点以下の桁数」→3

理由としては、サイズファイル肥大化の抑止です。
「編集機能の保持」は文字通りの機能ですが、その分ファイルサイズが増加します。
「小数点以下の桁数」も、パスのポイントを指定する座標の細かさを指し(1?7で指定)、桁数が多くなるほど細かく描写できますが、その分容量も増えます。

※ 0および小数点以下なしには設定できません。詳細オプションで一度も変更したことが無い場合に限り、デフォルトの数値1に設定されます。

また、上記以外では、SVGファイルに保存する際、使用しないレイヤー(作業用のみの使用など)はすべて削除した上で書き出しを行います。不可視にしただけでは、画像上では何も表示されていなくても、データ上ではデータがしっかり残っています。

display=”none”のプロパティが入り見えなくなっているだけで、ソース上にはデータが残っている。

不要レイヤーの削除、編集機能の破棄、小数点以下の桁指定で不意なサイズ増加を抑えることが出来ます。

Illustratorを使った編集は、ひとまずここまでです。
次回以降は、テキストエディターでSVGファイルの内容を編集していきます。

osa.

アルバイトにてWebサイト制作・管理業務を経て、2006年にシータス&ゼネラルプレスの前身であるゼネラル・プレスに入社。

HTMLコーディング業務を担当し、主にCSR系Webサイトの制作を手がける。

現在はコーディング業務に加え、制作全般のディレクションにも守備範囲を広げているっぽい。