html_svgファイルとは

HTML5

2021.01.13

【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において綺麗な画像を表示させるためには、ファイルサイズの大きい(容量の重たい)画像を読み込ませる必要があります。ページの容量が重たいことは、表示速度が遅くなってしまう要因の1つであるなど、あまり好ましくありません。

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

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

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

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

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

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

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!