SVG と PNG の違い：どちらを使うべき？

核心的な違い：数式かピクセルか

SVG はベクターです。ファイルには色の付いた点の格子は保存されていません。保存されているのは指示です。ここに円を描き、青で塗り、この点からあの点まで線を引く、というように。ブラウザはその指示を読み取り、求められたサイズで図形を毎回新たに描画します。切手サイズに縮小しても看板サイズに拡大しても、そのたびに再計算されるため輪郭はシャープなままです。

PNG はラスターです。1 つ 1 つが固定色を持つピクセルの格子をそのまま保存します。この格子には決まった解像度があります。元のサイズを超えて拡大すると、ブラウザはピクセルの間を推測で埋めるしかなく、輪郭はぼやけてブロック状になります。PNG は透過にも対応しており、色付きの背景の上に置くグラフィックで JPEG より優れているのはこのためです。

つまり違いはシンプルです。SVG は数式から描画され、無制限に拡大縮小できます。PNG はピクセルを固定した写真のようなもので、作られたサイズで最もきれいに見えます。

SVG が勝つ場面

きれいな図形で構成されるものはすべて SVG 向きです。ロゴ、アイコン、UI 要素、線画、チャート、フラットイラスト。これらはパスと塗りでできており、まさに SVG が最も得意とする表現なので、ファイルは非常に小さくなります。シンプルなアイコンなら数百バイトで済むこともあります。

ほかにも重要な利点が 2 つあります。SVG は図形が図形のままでピクセルに焼き込まれないため、いつまでも編集可能です。開き直して色を変えたり、点を少し動かしたりできます。そして無限に拡大縮小できるので、1 つの SVG ロゴがファビコン、サイトのヘッダー、印刷バナーまで、再書き出しなしでカバーします。

PNG が勝つ場面

写真や、細かいディテール・グラデーション・テクスチャを含むものは PNG にすべきです。写真には画面全体に微妙に異なる何千もの色があります。それをベクター図形で記述するのは無理があり、ファイルは巨大になります。ピクセルこそが正直な保存方法です。

背景から切り抜いた商品写真や角丸のスクリーンショットのように、透過付きのラスターが必要なときも PNG が安全な選択です。幅広くサポートされており、どんなソフトでも拒否されることはありません。

手早く決めるガイド

SVG を使う場面：画像がロゴ、アイコン、シンボル、チャート、フラットイラストのとき。さまざまなサイズに拡大縮小する必要があるとき。あとで編集を続けたいとき。

PNG を使う場面：画像が写真、または写真的なディテールを含むとき。透過付きの固定サイズのラスターが必要なとき。ピクセルしか受け付けないシステムにファイルを渡すとき。

実用的なコツを 1 つ。多くのチームはグラフィックを SVG でデザインし、各プラットフォームが求める正確なサイズで PNG を書き出します。編集可能なきれいなマスターと、納品用のフラットなファイルを、同じソースから得られます。

SVG を編集し、両方を書き出す

ベクターグラフィックを扱うなら、最後に書き出したコピーではなく、ドキュメントそのものが本物の SVG であるツールを使うと便利です。Rayzia はまさにそのように作られた無料のブラウザベースエディタで、編集しているファイルがそのまま SVG です。完成したら、拡大縮小できるマスターとして SVG を、プラットフォームがピクセルを求めるときは PNG を書き出せます。インストール不要でどのブラウザでも動くので、エディタを開けば 1 分で実際のファイルを試せます。

よくある質問