Web blog WEBブログ

SVGアニメーションを使って拡大しても粗くならない画像を描画してみよう!

2018.05.14

今回は、illustratorで作成したロゴデザインをSVGアニメーションで実装していきます。

基本的なSVGの使い方です。
CSSのアニメーションで動きをつけていきます。

SVGとは

SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略です。
JPEGやPNGはビットマップ画像というのに対し、SVGは「ベクター画像」となります。
 
SVG(ベクター画像)は、Web上で拡大縮小しても輪郭が劣化せず、はっきり表現できることが強みです。
またデータも軽いためスマホやタブレットなど様々なブラウザでの閲覧に最適です。

illustratorでSVGのパスを作成する

今回はillustratorで作成したロゴデザインを使用します。
■図形、テキストのすべてを「アウトライン化」します。

SVGコードの取得

■アウトライン化後、
メインメニューより「ファイル」>「保存 / 別名で保存」を選択し、「SVG(svg)」形式で保存します。
(※SVG圧縮と間違えないように注意してください)

■「保存」ボタンのクリック後、オプションダイアログボックス表示されます。下記のように各項目を設定し「SVGコード」ボタンをクリックします。
※illustratorのバージョンによって「レスポンシブ」の項目がある場合はチェックをいれてください。

■Webブラウザーが起動し、SVGコードが表示されます。
このコードをコピーします。

htmlファイルに読込み

■上記で取得したコードの<svg>~</svg>までを、HTMLファイルの任意箇所にコピペします。

CSS でアニメーション設定

■HTMLのすべての<path>のタグにclass名を追加します。
※今回は「class=”logo_path”」を追加します。

■<path>のインライン要素に書かれた「style=”fill:#F2A305;」(内部の塗りの色)は、CSSで管理するので削除します
■ピンクの塗りのパスに「class=”pink”」を設定
↓ ↓

■基本はこんな感じ


(「RERUN」をクリックするとアニメーションが繰り返されます)

DEMO

まずは描いた輪郭の内部に色を付けます。
■CSSの@keyframesで、アニメーションのタイミングを設定していきます。

 


(「RERUN」をクリックするとアニメーションが繰り返されます)

————————————————-
@keyframesの0%はアウトラインの描き始めのタイミングの設定。

0%{
stroke-dashoffset:3000;/*線の開始位置*/
fill:transparent; /*塗りつぶしの色・透明*/
}
————————————————-
@keyframesの100%はアウトラインが描き終わったタイミングの設定。

100%{
stroke-dashoffset:0;/*線の終了の位置*/
fill:#8FD3F5; /*塗りつぶしの色*/
}
————————————————-
上記はアウトラインが描き終わったタイミングで3色が同時に塗りつぶされます。

DEMO[応用]

■@keyframesのタイミングを増やして、3色それぞれ塗りつぶされるタイミングに変化をつけてみました。

 


(「RERUN」をクリックするとアニメーションが繰り返されます)

 

まとめ

今回はCSSのみで線や塗りの動きを指定しました。
Java scriptを組み込めば、さらに様々なアクションを表現することができます。
まずはロゴやアイコンにぜひSVGを利用してみてください。

杉浦直子

この記事を書いた人 杉浦 直子 ディレクター