SVG vs PNG:ロゴ、アイコン、スクリーンショットに使うべきファイル形式はどっち?

どのデザインツールも、書き出しのたびに同じ質問をしてきます。SVGかPNGか。作業しているサイズでは見た目が同じなので、みんな最初から選ばれているほうをそのまま選びます。違いが現れるのは後です。大きな画面で、遅いページで、変えなければならないブランドカラーで。ここでは同じアイコンを両形式で見比べ、それぞれのコストと、どのプロジェクトにも出てくるケース別の表を紹介します。

本当の違い:パスかピクセルか

SVGは命令を保存します。この曲線を描き、この色で塗る、という具合です。PNGは色付きピクセルの格子を保存し、点ごとに1つの値を持ちます。この1つの違いが、あとの違いをすべて説明します。

命令はどんなサイズでも実行できるので、曲線は毎回なめらかに描き直されます。格子は点の数が決まっているので、大きな画面ではそれを引き伸ばすしかありません。SVGはベクター形式、PNGはラスター形式です。どちらもW3Cのオープン標準で、Figmaの書き出しパネルでは両方が並んで選べます。

同じハートを思いきり拡大する

通常サイズでは、2つのハートは同じです。拡大すると、もう同じファイルではなくなります。

SVG(拡大)

PNG(拡大)

左のハートは新しいサイズでパスから描き直されるので、縁はきれいな曲線のままです。右のハートは同じアイコンを12×12ピクセルで描画し、最近傍補間で拡大したものなので、ピクセルがすべて見えます。実際の画面ではブロックではなくぼかしになるので、もう少し柔らかく見えますが、原因は同じです。ファイルにそのディテールが最初から入っていないのです。

PNGの対処法はもっと大きく書き出すこと。それがそのままPNGのコストでもあります。

コードで色を変える:1ファイルで好きな色に

SVGはテキストです。色は属性なので、書き出し直さなくてもスタイルシートで変えられます。

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

ホバー状態、ダークモード、ブランドテーマが、それぞれ1行で済みます。PNGは色ごと、サイズごとに新しいファイルが必要です。

ファイルサイズ:画像の中身しだい

上のハートで実測しました。SVGは290バイト。同じ見た目のサイズのPNGは、ピクセル数に応じて増えていきます。

シンプルな図形では、SVGは一定のままで、PNGは出荷するサイズごとに増えていきます。詳細な画像では逆転します。グラデーション背景と柔らかい影のある1200×800のカードを書き出したところ、PNGは55,365バイト、品質80のJPGは15,248バイト、品質80のWebPは4,970バイトでした。なめらかなグラデーションや影は無数の階調でできているため、SVGで再現するにはフィルターか膨大な数の図形が必要になります。

PNGが正解のとき

画像がきれいな図形でできていないなら、PNGが正解です。

• スクリーンショット。 柔らかい影と実際のテキストレンダリングがあるブラウザウィンドウやアプリ全画面は、本質的にピクセルです。PNGならそれを正確に保てます。
• 緻密なアートワーク。 細かいテクスチャ、粒状感、描き込まれた陰影はパスには還元できません。
• 単純ではない透過画像。 PNGは透過に対応しているので、縁が柔らかい切り抜きもどんな背景でも使えます。

1つ注意です。ロゴから作ったPNGは、サイズが固定されたPNGでしかありません。SVGをマスターとして保管し、SVGを読み込めない場所に限ってそこからPNGを書き出しましょう。

SVGが正解のとき

• ロゴ。 ウェブサイトのヘッダー、ファビコン、巨大看板まで1ファイルで済みます。PDF、AI、EPSを含む全体像はロゴのファイル形式を解説をご覧ください。
• アイコン。 タブバーやツールバーのアイコンセットを、CSSで状態ごとに色替えできます。最もよく使われるオープンなアイコンセットの1つであるLucideは、すべてのアイコンをSVGで提供しています。
• シンプルな図形やイラスト。 フラットカラーの図形、区切り線、バッジ、グラフ。

SVGの弱点もあります。数千の図形を持つファイルは重くなりますし、メールクライアント、SNSの共有プレビュー、古いアプリなどでは表示されない場合があります。そうした場所ではPNGを使いましょう。

写真はどうする?

どちらでもありません。2026年のスマートフォンで撮った写真は連続階調で、これはベクターが最も苦手とし、PNGでは大きくなってしまう領域です。JPGかWebPを使いましょう。写真の圧縮はPNGよりはるかに優れています。WebPは現行のブラウザで対応しています。

SVGかPNGか:判断表

FAQ

SVGはPNGより優れていますか?

ロゴ、アイコン、シンプルな図形ならそうです。どのサイズでもシャープで、たいてい小さくなります。スクリーンショットや緻密なアートワークはPNGのほうが向いています。すべてに勝てるのはどちらでもありません。

ロゴにはSVGとPNGのどちらを使うべきですか?

SVGです。マスターファイルとして保管し、メールやSNSツールなどSVGを表示できない場所向けに、そこからPNGを書き出しましょう。

SVGはPNGより小さいですか?

シンプルな図形なら小さくなります。上のハートが示すとおり、290バイトに対してPNGはサイズにより393〜10,400バイトです。詳細な画像では逆で、SVGで記述するには多くの図形が必要になるためです。

PNGもSVGのように色を変えられますか?

きれいにはできません。SVGのfillはCSSで変えられるテキスト属性です。PNGはピクセルが焼き込まれているので、色を変えるには書き出し直しが必要です。

PNGを拡大するとぼやけるのはなぜですか?

PNGはピクセルの格子が固定されているからです。本来のサイズより大きく表示すると、画面がそのピクセルを引き伸ばし、縁がぼやけたりブロック状になったりします。大きなサイズで書き出すか、シンプルな図形ならSVGを使いましょう。

写真にはPNGよりJPGやWebPのほうが良いですか?

はい。写真の圧縮ははるかに優れているので、ページの読み込みが速くなります。PNGはスクリーンショット、シャープなテキスト、グラフィックに取っておきましょう。

出典

• Scalable Vector Graphics (SVG) 2、W3C。
• Portable Network Graphics (PNG) Specification、W3C。
• Image file type and format guide、MDN Web Docs。
• ファイルサイズはsharpで自社計測。24×24のハートのパスをSVGと5サイズのPNGで、1200×800のグラデーションと影のカードを品質80のPNG、JPG、WebPで測定。
• 最初はUX Brainyでカルーセルとして公開。