RETINAディスプレイ対応！SVGの使い方からアニメーションまで徹底解説！

2017年9月1日

こんにちは！

デザイナーの伊東です。

今日は「SVG」についてのお話です。
ベクターデータを扱う事ができる画像形式として知られるSVGですが、なぜ便利なのか、どんな使い方ができるのかを解説していきたいと思います。

最後はコピペですぐに動く「SVGアニメーション」のコードも公開していますので、ぜひ最後までご覧ください！

SVGのメリット

個人的にSVGの最大のメリットだと思います。ベクターデータなので画像サイズを全く気にせずに拡大縮小できます。
スマホ用に大きめの画像を用意しないと。。とかRETINAディスプレイだから画像が荒れる。。とか、余計な心配をする必要がありません。

「この画像のこの部分、色の変更お願いします」ってなった時に、わざわざデザインデータを編集して書き出し直し。。なんて面倒な事はしなくても大丈夫です。色や線の情報はソースコードに書かれているので、エディター上で簡単に変更できます。

後ほどしっかりと触れますが、CSSやJSを駆使してアニメーションをつける事ができます。パスを利用したアニメーションが可能なので、普通のCSSアニメーションではできないような表現が可能です。

今回はテキスト画像をSVGとして保存して、使用することを想定してご説明します。
まずはIllustratorを立ち上げて、テキストを打ち込みます。
テキストデータをそのままSVGにする事はできないので、必ず「アウトライン化」します。

アウトラインデータが出来上がったら、データをSVG形式で保存します。
Illustratorのメニュー「ファイル」の「別名で保存」から、「SVG（svg）」形式を選択して保存します。特に難しい設定は必要ありませんので、そのまま保存しましょう。

先ほど保存したSVGデータを、試しにエディタで開いてみましょう。
SVGの中身は、こんな感じのソースコードになっています。

See the Pen VzVoPy by ito nao (@chokuro) on CodePen.

この時、<svg>タグのwidth=”◯px” height=”◯px”の部分がIllustratorのアートボードのサイズになっています。この部分を調整する事で、拡大縮小が可能になっています。

SVGの表示までできたので、今度は表示されたSVGをCSSアニメーションを使って動かしてみましょう！
アニメーションの準備段階として、まずはCSSでベクターデータを編集していきます。

See the Pen dzwyBv by ito nao (@chokuro) on CodePen.

塗りをなしにして、パスを点線に変更しました。
ここでSVG独自のCSSプロパティが登場するので説明します。

先ほど指定した破線を利用して、CSSでアニメーションをつけていきます。

See the Pen PKXwWd by ito nao (@chokuro) on CodePen.

理解するのが少し難しい所なのですが、何をしているのか説明します。
まずは破線の間隔(一つ一つの線の長さ)を、かなり大きい数に指定します。今回は3000という数字にしています。ここの数値は実際のパスの長さに合わせて調整が必要です。

この間隔の広い破線の”開始位置をずらして”動きを表現します。
上記のアニメーションでは、3秒間の間に開始位置を3000から0へと動かしています。

stroke-dasharray: 3000; stroke-dashoffset: 3000; の時は破線の長さ分開始位置がずれているので線は見えなくなり、stroke-dasharray: 3000; stroke-dashoffset: 0; の時は一本の線に見える、という仕組みです。

最後に、線を描くアニメーションのあとに塗りのアニメーションを追加します。

See the Pen EvGaOX by ito nao (@chokuro) on CodePen.

破線のアニメーションの後に、fillを#fffから#000へと変化させるアニメーションを追加しました。

今回はアニメーションの基本の部分をご紹介しましたが、工夫次第で様々なアレンジを加える事も可能かと思います。
ぜひいろいろ挑戦してみてください。