SVG vs PNG — ベクター画像とラスター画像をどう使い分けるか
ロゴ / アイコン / 図版 / 写真 で SVG と PNG のどちらを選ぶべきかを、解像度依存性 / ファイルサイズ / 編集容易性 / ブラウザ対応 の 4 軸で比較。相互変換の落とし穴も。
ベクターかラスターか — 4 つの判断軸
SVG と PNG はそもそも別の世界にいる画像形式です。SVG は XML テキストで形状 (パス・矩形・円・テキスト) を記述する ベクター、PNG は画素を格子状に並べた ラスター です。同じロゴをどちらで保存しても、見える結果はほぼ同じでも内部はまったく違います。選び分けの軸は 4 つです。
解像度依存 が最大の違いです。SVG は座標と形状を持つので、4K ディスプレイでも 8K でも輪郭がぼけません。PNG は画素そのものを持つので、表示倍率を上げるとジャギーが見えます。ファイルサイズ は内容次第で逆転します。シンプルな形状なら SVG が数 KB、PNG は数十〜数百 KB。一方で写真のような複雑な絵は SVG にしようとするとパスが数万本になり PNG より重くなります。編集容易性 は SVG が圧倒的で、テキストエディタで色・サイズ・形状を直接書き換えられます。PNG は Photoshop などのラスター編集ソフトが必要で、拡大方向の編集には弱い。対応範囲 は PNG の方が広く、Word / PowerPoint / 印刷ワークフロー / レガシーアプリは PNG をそのまま受け取れる一方、SVG は受け付けない場面が残ります。
比較表
| 項目 | SVG | PNG |
|---|---|---|
| 構造 | XML テキスト (ベクター) | バイナリ画素 (ラスター) |
| 拡大時 | 任意倍率で鮮明 | 拡大でジャギー / ぼけ |
| 透過 | 可 (アルファ + マスク) | 可 (8bit アルファ) |
| アニメーション | 可 (SMIL / CSS / JS) | 不可 (APNG 拡張のみ) |
| 編集 | テキストエディタで直接 | Photoshop / GIMP 等 |
| ファイルサイズ (ロゴ) | 2-15 KB が多い | 20-150 KB |
| ファイルサイズ (写真) | 不向き (数 MB 以上) | 数百 KB〜数 MB |
| 色数 | 制限なし | 制限なし (24bit + alpha) |
| 対応範囲 | モダンブラウザ / Illustrator / Figma | ほぼ全て (Word, 印刷, 旧 OS 含む) |
| 開発年 | 2001 (W3C 勧告) | 1996 |
| Photoshop ネイティブ対応 | 限定的 (バージョン依存) | 完全対応 |
ロゴサイズの目安は、Twitter ロゴ相当の単純パスで SVG が 1.5 KB、同じ見た目の 256x256 PNG が 8-15 KB です。一方、写真や複雑なグラデーションは SVG では再現困難で、無理にトレースすると数 MB のパス爆発を起こします。
ユースケース別の推奨
ロゴ・アイコン・UI 素材: SVG。Retina / 4K / 印刷の高 DPI まで 1 ファイルで対応でき、CSS から色を変えられるので dark mode 切り替えも容易です。currentColor 指定で文字色に追従させる定番テクニックも使えます。
写真・スクリーンショット・複雑な絵: PNG。画素を直接持つラスターは写真の本領で、SVG にしようとすると劣化と肥大化の両方を被ります。透過が要らない場合は JPG の方が小さくなりますが、UI スクリーンショットの文字エッジを保ちたいなら PNG が安全です。
Web の図版・グラフ・チャート: SVG。D3.js や Chart.js が SVG を吐けるので、ホバーやアニメーションを CSS/JS で後付けできます。PNG で出した図は後から色も変えられません。
Office 文書 / 印刷入稿: PNG。Word / PowerPoint の SVG サポートは古いバージョンで欠落し、印刷会社のワークフローも PNG/JPG/TIFF を前提にしているケースが多いです。
Retina 対応の UI 画像: SVG が安全。PNG で対応するなら @2x @3x の複数ファイルが必要になり、メンテナンスが重い。
nosend-tools での変換と落とし穴
ラスター画像をベクターにしたい (ロゴを再作成せず SVG 化したい) ときは image-to-svg でブラウザ内トレースができます。ただし トレースは万能ではなく、写真や微細なグラデーションを SVG 化すると数万本のパスに展開されてサイズが膨らみ、編集性も失われます。トレースが効くのは「色数が少なく輪郭が明確な」ロゴ・アイコン・図版に限られます。
逆に SVG が手元にあって PNG が欲しい場合は image-convert で SVG を読み込み、出力解像度を指定してラスタライズします。SVG のサイズが大きい・読み込みが遅い・コピペで貼りにくいときは svg-optimize で不要な属性 / メタデータ / 編集ソフトが残したコメントを削除すると 30-70% 縮みます。
セキュリティ面の落とし穴として、SVG は <script> タグや onload 属性を含められるので、信頼できない出所の SVG をそのままサイトに埋め込むと XSS の経路になります。<img src="...svg"> 経由で表示する場合はスクリプト実行が抑制されますが、<object> や inline SVG として埋め込む場合は注意が必要です。svg-optimize は危険な属性も削れるので、配布前の最終工程として通すと安全です。実装は GitHub で公開しており、いずれのツールも DevTools の Network タブで送信ゼロを目視確認できます。