SVG vs PNG vs JPG：実用フォーマットガイド
3つのフォーマットでほぼすべてのデジタル画像ニーズをカバーできます。唯一の「ベスト」は存在しません — 正しい選択はコンテンツと用途によって異なります。
今すぐ変換はじめに
Webで画像を扱う方なら、SVG、PNG、JPGファイルを使い分けた経験がほぼ確実にあるでしょう。この3つのフォーマットはデジタル画像の世界を支配していますが、それぞれ根本的に異なる目的のために設計されています。SVGは図形を描画するための数学的な命令を保存し、PNGはロスレス圧縮ですべてのピクセルを忠実に保持し、JPGは細かいディテールを犠牲にして劇的に小さい写真ファイルを実現します。
間違ったフォーマットを選ぶと、ロゴがぼやけたり、ページの読み込みが遅くなったり、写真の色が褪せたりします。正しいフォーマットを選べば、サイトは高速に、グラフィックはシャープに、ワークフローはシンプルになります。このガイドでは3つのフォーマットを並べて比較し、サイト上のすべての画像について自信を持って判断できるようにします — 企業ロゴ、製品スクリーンショット、ヒーロー写真のいずれであっても。
基盤となる技術について詳しくは、ラスターとベクターの解説記事をご覧ください。ピクセルと数学的記述の違いがなぜ重要なのかを解説しています。
フォーマット概要
SVG — Scalable Vector Graphics
SVGはXMLベースのベクターフォーマットです。ピクセルの代わりに、線、曲線、図形の数学的な記述が含まれています。つまり、SVGは16 pxのファビコンから10メートルのバナーまで、あらゆるサイズに品質を損なうことなく拡大縮小できます。SVGファイルはプレーンテキストなので、コードエディタで編集でき、CSSでスタイリングでき、JavaScriptでアニメーションでき、Gitでバージョン管理できます。詳しくはSVGとは？をお読みください。
PNG — Portable Network Graphics
PNGはロスレス圧縮を使用するラスターフォーマットです。元の画像のすべてのピクセルが正確に保持されるため、スクリーンショット、UIモックアップ、アルファチャンネルによる透明度が必要な画像に最適です。トレードオフはファイルサイズです。ソースが複雑な写真の場合、ロスレス圧縮はロッシーフォーマットにかないません。
JPG (JPEG) — Joint Photographic Experts Group
JPGは写真用に設計されたラスターフォーマットです。そのロッシー圧縮はピクセルのブロックを分析し、人間の目が気づきにくいディテールを破棄することで、同等のPNGより5〜10倍小さいファイルを生成します。JPGは透明度をサポートせず、編集と再保存を繰り返すと目に見えるアーティファクトが発生します。しかし写真コンテンツの一度限りの書き出しにおいては、そのサイズと品質のバランスに勝るものはありません。
比較表
以下の表は、フォーマット選択時に最も重要な特性でSVG、PNG、JPGを比較しています。
| 特性 | SVG | PNG | JPG |
|---|---|---|---|
| タイプ | ベクター (XML) | ラスター | ラスター |
| スケーラビリティ | 無限 — 品質劣化なし | 固定解像度；拡大するとぼやける | 固定解像度；拡大するとぼやける |
| ファイルサイズ（シンプルなグラフィック） | 非常に小さい（多くの場合 < 5 KB） | 小〜中 | 小さい（ただしロッシーアーティファクトが発生） |
| ファイルサイズ（写真） | 実用的でないほど大きい | 大きい（ロスレス） | 小さい（ロッシー圧縮） |
| 透明度 | 対応（ネイティブ） | 対応（アルファチャンネル） | 非対応 |
| アニメーション | 対応（CSS / SMIL / JS） | 非対応（APNGは別仕様） | 非対応 |
| 圧縮 | テキスト / gzip | ロスレス (DEFLATE) | ロッシー（DCTベース） |
| 編集性 | 完全対応 — XMLを編集、CSSでスタイリング | ピクセルレベルのみ | ピクセルレベルのみ |
| ブラウザサポート | すべてのモダンブラウザ | ユニバーサル | ユニバーサル |
| 最適な用途 | ロゴ、アイコン、UI、チャート | スクリーンショット、透明オーバーレイ | 写真、複雑な画像 |
2つのフォーマットをより詳しく比較するには、SVG vs PNG 詳細比較をご覧ください。
各フォーマットの使いどころ
比較表があっても、実際の判断にはトレードオフが伴います。以下のガイドでは、よくある画像タスクと推奨フォーマットを対応付けています。
SVGを選ぶ場面
- 画像がロゴ、アイコン、ブランドマークで、あらゆるサイズで鮮明に表示される必要がある。
- CSSテーマ切り替えが必要 — 例えばダークモードでアイコンの色を変更する場合。
- グラフィックがデータから生成されたチャート、ダイアグラム、インフォグラフィックである。
- 個別の要素をアニメーションしたい（ホバーエフェクト、ローディングスピナーなど）。
PNGを選ぶ場面
- 画像にアルファチャンネル（透明または半透明）が必要。
- スクリーンショットやUIモックアップを書き出す場合で、すべてのピクセルが重要。
- グラフィックに複雑な背景上にレンダリングされたテキストがあり、JPGのアーティファクトなしにシャープなエッジが必要。
JPGを選ぶ場面
- 画像が数百万色の写真やリアルなシーンである。
- ファイルサイズが重要 — JPGの圧縮はPNGよりはるかにアグレッシブ。
- 透明度が不要。
| タスク | 推奨フォーマット |
|---|---|
| Webサイトのロゴ | SVG |
| アプリのアイコンセット | SVG |
| ヒーロー写真 | JPG |
| 製品のスクリーンショット | PNG |
| 透明オーバーレイ | PNG |
| アニメーションイラスト | SVG |
| SNS用の写真 | JPG |
| データドリブンチャート | SVG |
画像がSVGの列に該当するのにJPGまたはPNGのソースしかない場合は、Any2SVGでSVGに変換できます。ブラウザベースのトレーサーは、ロゴや線画などクリーンでハイコントラストなグラフィックに最適です。
フォーマット間の変換
変換の仕組みを理解しておくと、現実的な期待値を設定できます。
JPG / PNG → SVG（トレース）
ラスター画像をSVGに変換するということはトレースを行うことを意味します。アルゴリズムがピクセルを分析し、元の形状を近似するベクターパスを生成します。近似処理であるため、トレースはエッジが明確で色数が限られた画像に最適です：ロゴ、アイコン、線画、シンプルなイラストなどです。写真や複雑なグラデーションを含む画像は、何千ものパスを持つ肥大化したSVGを生成し、ソースに忠実な結果になることはほとんどありません。
SVG → PNG / JPG（ラスタライズ）
逆方向の変換は簡単です。ラスタライズは、ベクター命令を指定された解像度でピクセルグリッド上にレンダリングします。すべてのブラウザはSVGを表示する際にこれを自動的に行い、FigmaやInkscapeなどのデザインツールでは任意のサイズで書き出せます。結果は書き出し解像度ではピクセルパーフェクトですが、元のベクターのスケーラビリティと編集性は失われます。
最も一般的な変換のガイド付きワークフローについては、PNGからSVGへの変換チュートリアルをご覧ください。
まとめ
SVG、PNG、JPGは競合するものではなく、補完し合うツールです。SVGはスケーリング、テーマ切り替え、軽量さが求められるあらゆるものに最適です：ロゴ、アイコン、UI要素、データチャート。PNGは透明度やロスレスのピクセル忠実度が必要な場合の信頼できる選択肢です。JPGは写真やファイルサイズがピクセルパーフェクトなエッジより重要な画像において依然としてチャンピオンです。
シンプルなルールを適用してください：ベクターグラフィック → SVG、透明画像 → PNG、写真 → JPG。フォーマット間の変換が必要な場合 — 特にラスターからベクターへの変換 — Any2SVGがブラウザ上で直接処理します。サーバーへのアップロードもサインアップも不要です。