WebサイトのアイコンをPNGではなくSVGで作る理由

Webサイトで矢印やメール、電話などのアイコンを表示するとき、PNG画像を使う方法とSVGを使う方法があります。

どちらも画面上では画像として表示されますが、仕組みは大きく異なります。

PNGは小さな点の集まりで画像を表現するのに対し、SVGは線や図形の情報をもとに描画します。

この違いを理解せずに画像形式を選ぶと、拡大したときにぼやけたり、色を変更するためだけに別の画像を用意したりすることになります。

今回は、WebサイトのアイコンにSVGが向いている理由と、PNGとの使い分けを解説します。

SVGは拡大してもぼやけにくい

PNGはピクセルと呼ばれる点の集まりで作られています。

決められた大きさで表示する分には問題ありませんが、元画像より大きくすると輪郭がぼやけたり、ギザギザが目立ったりします。

一方、SVGは線の位置や図形の形を情報として持っています。

表示するたびにブラウザが形を描画するため、大きくしても小さくしても輪郭がきれいに保たれます。

スマートフォンや高精細なディスプレイでも表示が荒れにくいため、ロゴやアイコン、単純な装飾に適しています。

CSSで色を変更できる

PNG画像の色を変えたい場合は、色違いの画像を作成するか、特殊な方法で見た目を変える必要があります。

通常時は白、マウスを重ねたときは緑にしたい場合、PNGでは白い画像と緑の画像をそれぞれ用意することがあります。

SVGであれば、作り方によってはCSSから線や塗りの色を変更できます。

そのため、通常時、ホバー時、選択時など、状態に応じた色の切り替えを管理しやすくなります。

サイト全体のメインカラーを変更するときも、画像を一つずつ作り直さず、CSS側の指定を変更するだけで対応できる場合があります。

インラインSVGとは

SVGには、画像ファイルとして読み込む方法だけでなく、HTMLの中へ図形の情報を直接記述する方法があります。

これをインラインSVGと呼びます。

画像ファイルとして読み込んだSVGは、通常の画像と同じように扱いやすい反面、内部の線や塗りをCSSから細かく変更しにくいことがあります。

インラインSVGでは、SVGを構成する線や図形がHTML内に存在するため、CSSから色や動きを指定しやすくなります。

ボタン内の矢印をホバー時に変色させたい場合や、線を描くアニメーションを付けたい場合などに便利です。

「画像をコードで書く」とはどういうことか

SVGの中身は、図形を描くための数値や命令で構成されています。

たとえば矢印であれば、どの位置からどの位置へ線を引くのかという情報を使って形を作ります。

そのため、PNG画像を見ながら同じ形になるようにSVGを書き直すこともできます。

これはPNG自体を変換して表示しているわけではありません。

元の画像を参考にしながら、ブラウザが描画できる線や図形として作り直している状態です。

単純な矢印や丸、チェックマークなどであれば、比較的少ない情報で再現できます。

ファイルを軽くできる場合がある

単純な形のアイコンであれば、SVGは小さなデータ量で表現できる場合があります。

色違いやサイズ違いのPNGを複数用意する必要もないため、管理する画像ファイルの数を減らせます。

ただし、SVGなら必ず軽くなるわけではありません。

複雑なイラストや、多数の点を含む図形では、SVGの情報量が増えてファイルサイズが大きくなることがあります。

不要な情報が残ったまま書き出されたSVGもあるため、形式だけで判断せず、実際のファイルサイズや内容を確認することが大切です。

SVGが向いている画像

SVGは、次のような画像に向いています。

ロゴ

矢印

メールや電話などのアイコン

チェックマーク

単純なイラスト

図形を組み合わせた装飾

色や動きをCSSで変更したい画像

輪郭がはっきりしていて、使用する色が少ない画像ほどSVGのメリットを生かしやすくなります。

特に、サイト内で何度も使用する共通アイコンはSVGにすると管理しやすくなります。

PNGやJPGが向いている画像

すべての画像をSVGにすればよいわけではありません。

写真や細かい質感を含む画像は、SVGで表現すると情報量が非常に多くなります。

人物写真、風景写真、施工写真などにはJPGやWebPが適しています。

背景が透明な写真や、複雑な加工を含む画像ではPNGが必要になる場合もあります。

SVGは図形や線に強く、JPGやWebPは写真に強いというように、画像の内容に合わせて形式を選びます。

SVGを使うときの注意点

インラインSVGを多用すると、HTMLが長くなり、ページの構造を確認しにくくなることがあります。

同じアイコンを複数箇所で使用する場合は、部品として共通化するなど、管理方法を考える必要があります。

また、外部から入手したSVGには不要な情報が含まれている可能性があります。

出所が分からないSVGをそのまま使用するのではなく、内容や利用条件を確認することが重要です。

装飾目的のアイコンであれば、読み上げ機能が不要な情報として無視できるようにするなど、アクセシビリティへの配慮も必要です。

まとめ

SVGは、線や図形の情報をもとに描画する画像形式です。

拡大してもぼやけにくく、CSSから色を変更できるため、ロゴや矢印、メールなどのアイコンに向いています。

特にインラインSVGは、ボタンの状態に応じた色の切り替えやアニメーションを実装しやすいことが特徴です。

ただし、写真や複雑な質感を持つ画像までSVGにする必要はありません。

単純な図形やアイコンにはSVG、写真にはJPGやWebPというように、それぞれの得意分野を理解して使い分けることが大切です。