【HTML】SVGファイルとは

ウェブサイトを見ていると、以下のようなアニメーションを見かけることがあります。

See the Pen svg by spiqa design (@spiqa_design) on CodePen.

このアニメーションは、「SVG」と呼ばれるものを使用して再現しています。

本日は、「SVGファイル」とは何なのか、SVGを用いるメリットにはどのようなことがあるのかを紹介していきたいと思います。

SVGファイルとは

　SVGとは、「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」のことで、画像形式のひとつです。

ウェブサイトでよく用いられているJPGやPNGなどの画像は、様々な色のついた点（ドット）が集まって再現されています。一方、SVGは、点や線などの情報を数値化して座標と数式を組み合わせて再現しています。

SVGファイルを用いることのメリット

画像を拡大しても画質が落ちない

JPGやPNGなどの画像は、先述の通り、点（ドット）により再現しているため、画像を拡大すると画質が落ちてしまいます。

例えば、こちらの画像を拡大してみてください。

画像が荒くなっているのが把握できるかと思います。画質を保つためには、より画質の高い（ドットが多い）画像を用いることが求められます。

一方、SVGファイルの場合、ブラウザがその場で計算して描画しているため、拡大しても画質が落ちることはありません。試しに、以下のSVG画像を拡大してみてください。

See the Pen svg by spiqa design (@spiqa_design) on CodePen.

色の変更などが容易

JPGやPNGの画像の場合、画像の色の変更などに対応するためには、再度画像の書き出しを行い、新しい画像を読み込ませる必要があります。

一方、SVGの画像の場合、色についてもCSSで指定しているため、コードの編集だけで色の変更に対応することができます。

ファイルサイズが小さい

先述の通り、点の集まりであるJPGやPNGにおいて綺麗な画像を表示させるためには、ファイルサイズの大きい（容量の重たい）画像を読み込ませる必要があります。ページの容量が重たいことは、表示速度が遅くなってしまう要因の１つであるなど、あまり好ましくありません。

SVGファイルは、テキストを読み込んで描画するという性質上、JPGやPNGに比べてファイルサイズが小さいです。

パスごとにアニメーションをつけることができる

最初の例で見たように、SVGでは、パスごとにアニメーションをつけることも可能なので、表現の幅が広がります。

ここまでSVGのメリットを見てきました。しかし、SVGによって何でも表現できるわけではなく、色や形状が複雑なオブジェクトは、点や線の集まりでは表現しきれないため、SVGには不向きです。

表現したい内容に応じて、適切な方法を用いるようにしましょう。

今後、SVGのアニメーションなどについても詳しく記事を書いていきたいと思いますので、またご覧ください！