《ブログリレー＃7》SVGアニメーションについて
そもそもSVGファイルとは
SVGファイルとは、GIF・JPEG・PNG（ラスタ形式）と言ったようなwebでよく見かけられる画像との違いSVGはXMLをベースにした二次元ベクターデータであることです。
ラスタ形式とベクトル形式の違い
GIF、JPEG、PNGといった「ラスタ形式」の画像は、ピクセルを縦横に並べる方法で画像を描画します。
ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになるため編集には不向きです。
加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。
SVGファイルは、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」で画像を描画します。
ベクトル形式は拡大縮小に強く画質が劣化しないため、 どのような画面上であっても鮮明かつ明瞭な画像を表示できるというメリットがあります。
レスポンシブデザインが主流となっていますが、PCとスマートフォンで画像の見た目が変わってしまっては非常に残念です。
しかし、SVGファイルを活用することにより、どちらの画面でも綺麗な画像をユーザーに見せることができます。
ファイルサイズも小さく、リソースに限りがある場合でも使いやすいフォーマットです。
SVGファイルはテキストエディタで編集可能
SVGファイルはXMLに準拠しているという特徴も持っているため、テキストエディタで開きファイルを編集することが可能です 。
SVGファイルの作成方法
Adobe Illustratorを使用したSVGファイルの作成方法
※SVGは、GIF、JPEG、PNGなどよりかなり容量を抑えることができるので、アニメーションにしなても使用用途は広いといえます。
SVG形式のファイルをHTMLで表示する方法
- <img src="brave.svg" width="32" height="32">
- <div style="width:32px; height:32px; background-image:url(brave.svg); background-size:100%;"></div>
- <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
- <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
- </svg>
- <object type="image/svg+xml" data="brave.svg" width="256" height="256"></object>
※SVGアニメーションを作成する必要がある場合などは①のIMGタグや②のCSSで表示してしまうと、表示されたSVG形式ファイルに対してJavaScript等で一切操作ができないのでインラインSVGタグとして埋め込む必要があります。
サンプルSVGアニメーション
それでは実際SVGアニメーションを紹介します。
ブレイブロゴアニメーション
ブレイブのロゴをSVGにアニメーション設定してみます。
See the Pen eYZmvPp by kaname (@kaname0231)
on CodePen.
上記でHTMLのソースとCSSのソースが確認できます。
HTMLとCSSのみでリッチでキャッチーなロゴが完成します。
複雑なパスでのアニメーション
複雑なパスでもSVGにアニメーション設定可能です。
See the Pen
u6 by kaname (@kaname0231)
on CodePen.
最後に
Gif や動画とは動きのニュアンスが異なりますが、SVG 特有の滑らかな動きと美しさはアイキャッチにはよい施策でしょう。
今回は複雑なパスのアニメーションの紹介でしたが、動的なアンダーラインや、CTA施策の際のエッセンスとして活用してみてはいかがでしょか？
次回のブログリレーは、「宮城さん」でよろしく！
