SVGとPNGの違い：用途に合う画像形式の選び方
SVGは形状、PNGは固定ピクセルを保存します。画像の内容と配布先に応じて使い分けるための比較です。
目次
Advertisement
SVGとPNGは、どちらもロゴやアイコンに使われますが、データの持ち方が異なります。SVGは形状とパスを記録し、PNGは決まった大きさのピクセルを保存します。どちらが適切かは、画像の内容、表示サイズ、配布先、再編集の有無で決まります。
まず用途別の目安を示し、その後で画質、容量、透過、アニメーション、互換性、変換時の注意点を比較します。
先に結論：SVGとPNGの使い分け
用途別の目安は次のとおりです。
-
SVGを選ぶ：ロゴ、アイコン、イラスト、チャート、図解など、複数サイズで表示する図形中心の画像に向いています。パスや図形を再計算して描画するため、拡大しても輪郭が粗くなりません。
-
PNGを選ぶ：スクリーンショット、透過を含むUI素材、ピクセル単位で同じ表示を保ちたい画像に向いています。写真では容量が大きくなりやすいため、JPEG、WebP、AVIFとも比較します。
-
変換が必要な場合：svg2img.cc では、対応ブラウザ上でSVGをPNGに変換できます。選択したファイルは変換処理のために外部サーバーへ送信されません。
なぜこれらの違いが重要なのか、詳しく見ていきましょう。
SVGとは？
SVGは Scalable Vector Graphics（スケーラブルベクターグラフィックス）の略です。XMLベースのマークアップ言語で、ピクセルのグリッドではなく、数学的な数式と幾何学的プリミティブ（線、曲線、図形、パス）を使って2次元グラフィックスを記述します。
SVGの主な特徴
ベクターベース： SVGファイルは座標と図形で画像を定義します。たとえば円は、色の付いた画素の集合ではなく、中心点と半径として表されます。そのため、16×16ピクセルのアイコンから大判印刷まで、輪郭を保ったまま拡大できます。
テキストベースで編集可能： SVGはXML（テキスト形式）で記述されているため、任意のテキストエディタで開いて内容の読み取りや変更ができます。色の変更、パスの調整、要素の追加や削除を、専門のグラフィックデザインソフトウェアなしで行えます。これにより、SVGファイルはGitなどのバージョン管理システムにも最適です。
CSSでスタイリング可能： SVG要素はHTML要素と同じようにCSSに反応します。スタイルシートを使ってフィル、ストローク、不透明度などの視覚プロパティを変更でき、ブランドの一貫性を保ちやすく、テーマの作成も簡単です。
JavaScriptで操作可能： SVGはDOMと深く統合されています。JavaScriptでSVG要素を操作し、インタラクティブなチャート、アニメーションアイコン、データ駆動のビジュアライゼーション、レスポンシブなインフォグラフィックを作成できます。
意味情報を持たせられる： インラインSVGには <title>、<desc>、ARIA属性を設定できます。ただし、SVGを使うだけで検索順位が上がるわけではありません。周辺テキスト、代替説明、ページ全体の品質も必要です。
単純な図形では小さくしやすい： 要素数の少ないアイコンやロゴは、同じ見た目のPNGよりSVGの方が小さくなる場合があります。パスが非常に複雑な画像では逆になるため、実ファイルで比較します。
アニメーション対応： SVGは <animate> 要素、SMIL、CSSアニメーションを通じてネイティブのアニメーション機能を備えています。GIFや動画ファイルに頼ることなく、滑らかで解像度に依存しないアニメーションを作成できます。
SVGの限界
SVGは万能ではありません。写真や色のグラデーションが数千ある高精細なイラストなど、複雑な画像はSVGではうまく圧縮できません。実際、写真をSVGで表現しようとすると、同等のPNGやJPEGよりもはるかに大きなファイルになってしまいます。また、非常に複雑で数千の要素を含むSVGファイルでは、レンダリングパフォーマンスが低下する可能性があります。
PNGとは？
PNGは Portable Network Graphics（ポータブルネットワークグラフィックス）の略です。1995年にGIF形式の優れた特許フリーの代替として作成され、以来Webで最も広く使われる画像フォーマットの一つとなっています。
PNGの主な特徴
ラスター（ビットマップ）形式： PNGは画像を個々のピクセルのグリッドとして保存し、各ピクセルには特定の色の値が割り当てられます。SVGの数学的な記述とは異なり、PNGは画像内のすべてのピクセルの正確な色を記録します。これにより、PNGは色の変化が複雑で細かいディテールのある画像に最適です。
可逆圧縮： PNGは保存時に画素情報を捨てないため、再表示しても圧縮によるブロックノイズやにじみが加わりません。スクリーンショットやUI素材など、画素を正確に保ちたい用途に向いています。
アルファ透過： PNGは8ビットのアルファチャンネルを利用でき、透明から不透明までを段階的に表現できます。JPEGは透過に対応せず、GIFの透過は基本的に透明か不透明かの2段階です。
複数の色タイプ： PNGはパレットカラー、RGB、RGBAなどを扱えます。アルファチャンネルを含める場合は容量も増えるため、用途に合う設定で書き出します。
広い互換性： PNGは主要なブラウザ、OS、画像編集ソフトで広く扱えます。外部サービスへ画像を渡す場合も、SVGより受け付けられやすい形式です。
アニメーション非対応（標準PNG）： 標準のPNGはアニメーションをサポートしていません。APNG（Animated PNG）はアニメーション機能を追加した拡張形式で、ほとんどのモダンブラウザでサポートされていますが、元のPNG仕様の一部ではありません。
PNGの限界
写真のような画像では、PNGはJPEGやWebPの非可逆圧縮より容量が大きくなりやすい形式です。単純なアイコンやロゴでも、同じ見た目のSVGより大きくなる場合があります。またPNGは固定解像度なので、元の寸法を超えて拡大すると画素の粗さやぼやけが目立ちます。
SVGとPNGの比較表
主な違いを並べて確認します。
| 特徴 | SVG | PNG |
|---|---|---|
| フォーマット種別 | ベクター（XMLベースのマークアップ） | ラスター（ビットマップのピクセルグリッド） |
| 拡大縮小性 | 図形を再計算するため拡大に強い | 固定解像度。拡大すると粗くなる |
| ファイルサイズ（シンプルグラフィック） | 非常に小さい（アイコンは1KB未満も） | 中程度（アイコンは通常2-10KB） |
| ファイルサイズ（複雑な画像） | 非常に大きくなるか実用的でない | 一貫して予測可能 |
| 透過 | fill opacity、clip-pathで完全対応 | 完全な8ビットアルファチャンネル（256段階） |
| アニメーション | ネイティブ対応（SMIL、CSS、JS） | 標準PNGは非対応（APNGは限定的） |
| 編集方法 | テキストエディタ対応、CSSスタイリング、JS操作 | 画像編集ソフトが必要 |
| ブラウザ対応 | 主要ブラウザで対応 | 主要ブラウザで対応 |
| 印刷品質 | あらゆる解像度で優秀 | 元の解像度に依存；高DPIが必要 |
| 意味情報 | インライン時はtitle・desc・ARIA属性を設定可能 | img要素のaltと周辺テキストで説明 |
| 圧縮方式 | GZIP（テキスト圧縮） | ロスレスPNG圧縮 |
| 色深度 | 無制限（コードで定義） | 最大32ビット（1677万色 + Alpha） |
| 写真コンテンツ | 不適切 | 優秀 |
| アクセシビリティ | ARIA属性対応、読み取り可能なテキスト | Altテキストとコンテキストのみ |
| 読み込み性能 | 小さいファイルは高速；複雑なSVGはレンダリングが遅い場合も | デコード速度は一定；大きいファイルは読み込みに時間がかかる |
SVGを使うべきケース
次のような画像にはSVGが向いています。
1. ロゴとブランドマーク
ロゴはスマートフォン、デスクトップ、印刷物など複数のサイズで使われます。SVGなら一つのデータから各サイズへ描画できます。PNGを使う場合は、表示密度に合わせて1x、2x、3xなど複数の解像度を用意します。
2. アイコンとアイコンセット
UIアイコンは色数が少なく、単純な図形で構成されることが多いためSVGに向いています。スプライトとしてまとめたり、CSSで色を変えたりでき、実装方法によってはリクエスト数や容量も抑えられます。
3. イラストとラインアート
フラットデザインのイラスト、技術図、フローチャート、ラインアートはすべてSVGに最適です。これらのグラフィックは通常、クリーンな線、単色、幾何学的な図形を使用しており、SVGはこれらすべての要素を効率的かつ正確に表現できます。
4. データビジュアライゼーションとチャート
インタラクティブなチャート、グラフ、ダッシュボードはSVGの大きな恩恵を受けます。SVG要素はDOMに存在するため、イベントリスナー、ツールチップ、ホバーエフェクト、リアルタイムのデータ更新を付加できます。D3.js、Chart.js、Rechartsなどの主要なチャートライブラリがSVGを使用しているのはこのためです。
5. アニメーショングラフィック
ローディング表示やアイコンの状態変化など、図形中心の短い動きはSVGで実装できます。CSS、SMIL、JavaScriptから、要件と対応環境に合う方法を選びます。複雑な映像では動画形式も比較してください。
6. レスポンシブデザイン要素
グラフィックが無数の画面サイズとピクセル密度に適応する必要のあるレスポンシブなWeb環境では、SVGが複数の画像ファイルの必要性を排除します。1つのSVGファイルがすべてのブレークポイントとデバイスに対応します。
7. 印刷用グラフィック
SVGは出力先の解像度に合わせて描画できます。対応する制作・印刷環境であれば、画面と印刷で共通の元データとして使えます。
PNGを使うべきケース
次のような画像にはPNGが向いています。
1. 写真とリアルな画像
写真や複雑な色の変化を持つ画像は、SVGでは効率よく表現できません。可逆保存や透過が必要ならPNG、容量を抑えたい写真ならJPEG、WebP、AVIFを検討します。
2. スクリーンショット
スクリーンショットは画面上の内容のピクセル単位の正確なキャプチャです。PNGはすべてのピクセルを正確に保存し、スクリーンショットの標準フォーマットとなっています。スクリーンショットのピクセルベースの性質上、ベクター表現による利点はありません。
3. 複雑なデジタルアートとテクスチャ付きグラフィック
豊かなテクスチャ、ノイズパターン、水彩効果、または数千の細かいディテールを持つ画像は、PNGに向いています。これらの要素はベクターパスとしてうまく圧縮できず、SVGファイルが非現実的なほど大きくなってしまいます。
4. 互換性を保証したい場合
メールテンプレート、一部のCMS、古いソフトウェア、SVGを受け付けない外部サービスではPNGが扱いやすい場合があります。配布先の仕様を確認してください。
5. 透過付きの装飾画像
背景を切り抜いた商品画像や半透明のオーバーレイなど、画素単位の滑らかな透過が必要な画像ではPNGを利用できます。
6. 高DPIラスターグラフィック
ラスター素材を高DPIディスプレイで鮮明に見せるには、実際の表示寸法より大きいPNGを用意し、srcset などで表示密度に合う画像を配信します。
SVGとPNGの相互変換
Webサイト用にはSVG、SVGを受け付けないサービス用にはPNGというように、同じ素材を複数形式で用意することがあります。
SVGからPNGへの変換
SVGからPNGへ変換するときは、次の項目を決めます。
- 出力寸法： PNGは固定解像度フォーマットなので、ピクセル寸法を指定する必要があります。Web使用の場合、表示サイズの2倍または3倍でエクスポートすることでRetinaディスプレイでの鮮明さを確保できます。
- 背景色： SVGは透過をサポートしています。PNG出力の背景を透明にするか、単色で塗りつぶすかを選択できます。
- 色数と透過： 利用する変換ツールに減色や透過の設定がある場合は、見た目とファイルサイズを確認します。
手元のSVGをPNGへ変換する場合は、svg2img.cc を利用できます。SVGコードを貼り付けるかファイルをドラッグし、出力設定を選んでPNGを保存します。変換対象のファイルは外部サーバーへ送信されません。
PNGからSVGへの変換
PNGからSVG（ベクター化）への変換はより複雑です。ラスター画像をトレースして、数学的に表現できる図形、線、パスを識別する必要があります。このプロセスはエッジがクリーンなシンプルなグラフィックではうまく機能しますが、写真や複雑な画像では良い結果が得られません。
PNGからSVG変換のベストプラクティス：
- 重要な素材にはベクターエディタ（Adobe Illustrator、Inkscape）で手動トレース
- シンプルなグラフィックには自動トレースツールを使用
- 元のベクターデータがある場合は、そこからSVGを書き出す
モダンWeb開発におけるSVGとPNG
SVGとPNGはどちらもモダンなWebスタックで重要な役割を果たしています。一般的なワークフローでの位置づけを見てみましょう：
パフォーマンス最適化： UI要素にはできるだけSVGを使用し、ページ重量を最小化します。写真コンテンツにはPNGを併用します。WebpackやViteのようなモダンなビルドツールは、両方のフォーマットを自動的に最適化できます。
レスポンシブ画像： SVGは本質的にレスポンシブです。PNG画像には、srcset 属性を使用して異なる画面密度に複数の解像度を提供します。
アクセシビリティ： SVGには <title> と <desc> 要素の埋め込み、ARIAロールの追加、読み取り可能なテキストの含め方ができ、グラフィックをスクリーンリーダーにアクセシブルにします。PNG画像には常に説明的なAltテキストを提供してください。
プログレッシブローディング： SVGファイルはHTMLに直接インライン化でき、HTTPリクエストを削減できます。PNGファイルには、ファーストビュー以下の画像に遅延読み込みを検討してください。
よくある質問
SVGは常にPNGより優れていますか？
いいえ。SVGはロゴ、アイコン、イラストなど拡大縮小する図形に向きます。PNGはスクリーンショットや透過を含むラスター画像に向きます。画像の内容と配布先に合わせて選びます。
PNGを品質劣化なくSVGに変換できますか？
通常はできません。PNGからSVGへの変換は輪郭を推定するトレース処理であり、元のベクターデータを復元するものではありません。単純なロゴや線画には使えますが、写真や複雑な画像では細部が失われます。
SVGファイルがPNGファイルより大きいのはなぜですか？
これは通常、SVGに埋め込まれたラスター画像（<image> タグ経由）、数千のポイントを持つ過度に複雑なパス、または不要なメタデータが含まれている場合に起こります。パスの簡略化、未使用要素の削除、SVGOなどのツールを使って不要なデータを取り除くことで、SVGを最適化してみてください。
SVGはPNGのような透過をサポートしていますか？
はい。SVGはフィルの不透明度、ストロークの不透明度、クリップパスを通じて完全な透過をサポートしています。実際、SVGの透過は解像度に依存しませんが、PNGの透過はピクセルごとに定義されます。両フォーマットとも透過を優れた形で処理しますが、実装方法は異なります。
どちらのフォーマットがWebサイトで速く読み込まれますか？
内容と実装によります。単純なアイコンやロゴではSVGが小さくなる場合があります。写真ではPNGが大きくなりやすいため、JPEG、WebP、AVIFも比較します。SVGをHTMLへインライン化すれば追加リクエストを減らせますが、HTML自体の容量は増えます。
SVGはAPNGのようにアニメーションできますか？
SVGはCSS、SMIL、JavaScriptで図形を動かせるため、インタラクティブなUI表現に向いています。APNGは複数のラスター画像を順番に表示する形式です。必要な動き、容量、実装方法に合わせて選びます。
SVGはSEOに役立ちますか？
SVGだから自動的に検索順位が上がるわけではありません。意味のあるファイル名、周辺テキスト、alt、インラインSVGの <title> や <desc> などを適切に設定すると、画像の内容と用途を検索エンジンや支援技術へ伝えやすくなります。
SVGを無料でPNGに変換するにはどうすればいいですか？
svg2img.cc では、ブラウザ上でSVGをPNGへ変換し、寸法や背景を設定できます。選択したファイルは変換のためにサイトのサーバーへアップロードされません。
まとめ
SVGとPNGのどちらが適切かは、画像の内容と利用先で決まります。
-
SVGを選ぶ：パスや図形で構成され、複数サイズへの対応やCSS/JavaScriptによる操作が必要な場合。ロゴ、アイコン、図表などが代表例です。
-
PNGを選ぶ：固定ピクセルのスクリーンショット、無損失で保存したいUI素材、アルファ透過が必要な場合。写真や複雑な画像はJPEG、WebP、AVIFとも比較します。
-
変換が必要な場合：svg2img.cc では、ブラウザ上で寸法と背景を指定してPNGへ変換できます。
元データを残し、実際の表示サイズ、ファイル容量、配布先での互換性を確認して選んでください。