SVG と PNG の違い【ベクター vs ラスターの選び方】

Logo・アイコン・Web 用グラフィックでは SVG も PNG も定番で、いずれも透過に対応しています。とはいえ仕組みはまったく違うため、選び方を間違えると、Logo が滲む・無駄にファイルが重い・高解像度ディスプレイで汚く見えるといった問題が起きます。

根本の違い：ベクター vs ラスター

PNG はラスター形式。 画像を固定サイズのピクセルグリッド——決まった数のドットそれぞれに色を持たせて——保存します。元のサイズを超えて拡大するとぼやけます。新たなピクセル情報を生み出すことはできないからです。

SVG はベクター形式。 画像を「ここに円を描く」「この色で塗る」「点 A から点 B に線を引く」といった数学的な命令の集合として保存します。どのサイズに拡大しても再描画されるため、常にシャープに表示されます。

Logo。 企業ロゴは名刺・Web・屋外広告・スマホ画面と、サイズが大きく異なる場面で使われます。SVG なら 1 ファイルですべて鮮明に対応できます。

アイコンと UI パーツ。 ナビゲーションアイコン、ボタン、UI グラフィックはほぼ常に SVG が最適です。ファイルサイズが極小で、Retina や HiDPI でも崩れず、CSS でスタイルや色を変えられます。

フラットカラーやグラデーションのイラスト。 チャート、図解、インフォグラフィック、幾何学的なイラストは SVG のホームグラウンドです。

サイズを抑えたい単純なグラフィック。 シンプルな SVG Logo は 2〜5 KB ほどで済みますが、同じものを高解像度 PNG にすると 50〜200 KB にもなります。

写真や複雑な画像。 写真には数百万色の連続諧調があり、これをベクターパスで表現するのは現実的ではありません。PNG（または JPG / WebP）を使いましょう。

スクリーンショット。 スクリーンショットは本質的にラスター画像で、ピクセル単位でキャプチャされます。PNG なら全ピクセルを正確に保持できます。

部分的に透明なピクセルを含む画像。 PNG は半透明を含む完全な alpha 透過に対応しており、複雑な画像で扱いやすいのは PNG です。

SVG が使えないとき。 一部のメールクライアントや古いアプリは SVG を確実にレンダリングできません。安全策として PNG を選ぶ場面はまだあります。

メール送信、SVG を受け付けないプラットフォーム、特定ピクセルサイズのアプリアイコンや SNS 画像を作るために、SVG から PNG に変換したいことがあります：

SVG は普通の画像のように編集できる？ SVG は実体が XML テキストです。テキストエディタや、Figma・Illustrator・無料の Inkscape などのベクターツールで開けます。Web では CSS で直接スタイルを当てることもできます。

サイトの Logo は SVG と PNG どっちがいい？ ほとんどの場合 SVG。どの解像度でも鮮明、ファイルサイズも小さく、ファイルを編集せずに CSS で色を変えられます。

SVG はきれいなのに、書き出した PNG がぼやけるのはなぜ？ 書き出す際のピクセル寸法が原因です。100×100 px で書き出すと、2 倍の Retina 画面では滲んで見えます。表示サイズの 2 倍（100×100 表示なら 200×200 px）で書き出せばシャープになります。