SVGとPNGって何が違うの

項目	評価
稼げる度
難易度
おすすめ度

SVGとPNGは、どちらもWebサイトやアプリなどでよく使われる画像形式です。それぞれの画像形式には、異なる特徴と適した画像があります。

特徴

SVG

SVGは、Scalable Vector Graphicsの略で、ベクター形式の画像形式です。ベクター形式とは、図形の形状や線の太さなどを数値で表した形式で、拡大や縮小をしても画質が劣化しません。また、透過やアニメーションなどもサポートしています。

PNG

PNGは、Portable Network Graphicsの略で、ラスター形式の画像形式です。ラスター形式とは、画像を色の点の集合で表した形式で、拡大や縮小をすると画質が劣化します。しかし、透過やアルファチャンネルなどの機能をサポートしています。

適した用途

拡大や縮小をしても画質を維持したい場合

SVGは、ベクター形式であるため、拡大や縮小をしても画質を維持することができます。

そのため、拡大や縮小をしても画質を維持したい場合は、SVGが適しています。具体的には、以下の画像に適しています。

• ロゴ
• アイコン
• 図形
• イラスト
• 図表

透過やアルファチャンネルなどの機能を利用したい場合

PNGは、ラスター形式であるため、透過やアルファチャンネルなどの機能をサポートしています。

そのため、透過やアルファチャンネルなどの機能を利用したい場合は、PNGが適しています。具体的には、以下の画像に適しています。

• 背景を透過させたい画像
• 画像の一部を透明にしたい画像
• 水彩画や油絵などの画像

ファイルサイズを抑えたい場合

SVGはベクター形式の画像形式であるため、ファイルサイズが小さくなる傾向があります。一方、PNGはラスター形式の画像形式であるため、ファイルサイズが大きくなる傾向があります。

そのため、ファイルサイズを抑えたい場合は、SVGが適しています。

互換性を確保したい場合

SVGは、Webブラウザやアプリのほとんどでサポートされています。一方、PNGは、Webブラウザやアプリのほとんどでサポートされていますが、一部の古いブラウザではサポートされていない場合があります。

そのため、互換性を確保したい場合は、PNGが適しています。