blog - スタッフブログ blog - スタッフブログ

blog スタッフブログ

《ブログリレー#7》SVGアニメーションについて

そもそもSVGファイルとは

SVGファイルとは、GIF・JPEG・PNG(ラスタ形式)と言ったようなwebでよく見かけられる画像との違いSVGはXMLをベースにした二次元ベクターデータであることです。

ラスタ形式とベクトル形式の違い

GIF、JPEG、PNGといった「ラスタ形式」の画像は、ピクセルを縦横に並べる方法で画像を描画します。
ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになるため編集には不向きです。
加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。

SVGファイルは、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」で画像を描画します。
ベクトル形式は拡大縮小に強く画質が劣化しないため、 どのような画面上であっても鮮明かつ明瞭な画像を表示できるというメリットがあります。
レスポンシブデザインが主流となっていますが、PCとスマートフォンで画像の見た目が変わってしまっては非常に残念です。
しかし、SVGファイルを活用することにより、どちらの画面でも綺麗な画像をユーザーに見せることができます。
ファイルサイズも小さく、リソースに限りがある場合でも使いやすいフォーマットです。

SVGファイルはテキストエディタで編集可能

SVGファイルはXMLに準拠しているという特徴も持っているため、テキストエディタで開きファイルを編集することが可能です 。

SVGファイルの作成方法

Adobe Illustratorを使用したSVGファイルの作成方法

①イラストレータにてSVGファイルにしたいファイルを作成&データを開きます。

②ファイル > 別名で保存と進めます。

③ファイル名を入力し、ファイルの種類「SVG」を選択して「保存」をクリックします。

④オプション画面を表示しますので「OK」をクリックしましょう。

※SVGは、GIF、JPEG、PNGなどよりかなり容量を抑えることができるので、アニメーションにしなても使用用途は広いといえます。

SVG形式のファイルをHTMLで表示する方法

①<IMG>を使う ─ HTMLのIMGタグにSVGファイルを直接指定するやり方。

  1. <img src="brave.svg" width="32" height="32">

②CSSを使う ─ CSSのbackground-imageプロパティで背景画像として指定するやり方。

  1. <div style="width:32px; height:32px; background-image:url(brave.svg); background-size:100%;"></div>

③<SVG> タグを使う ─ HTML内に(インラインで)直接SVGタグでベクターパスを指定して描画するやり方。

  1. <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
  2.   <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 "/>
  3. </svg>

<OBJECT> タグを使う ─ HTMLのOBJECTタグでSVGファイルを埋め込むやり方。

  1. <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施策の際のエッセンスとして活用してみてはいかがでしょか?

次回のブログリレーは、「宮城さん」でよろしく!

prev
next
blog top
contact
contact