SVG2IMG Logosvg2img
EN中日

SVG vs PNG：どちらを使うべきか？完全比較ガイド

•Jack

画像フォーマットの選び方一つで、Webサイトのパフォーマンス、表示品質、そしてユーザー体験が大きく変わります。最もよく使われる2つのフォーマット——SVGとPNG。一見すると互換的に思えるかもしれませんが、実は根本的に異なる目的を持っています。選択を間違えると、ぼやけたロゴ、肥大化したファイルサイズ、互換性の問題に悩まされることになります。

この記事では、SVG vs PNG の答えを明確に示します。最初に手短なまとめ、その後に各フォーマットの詳細な解説、並列比較表、そしてあらゆる一般的なユースケースに対する実践的な推奨を提供します。

> 早速結論：SVG vs PNG 一覧

時間がない方のために、手短にまとめます：

  • SVGを選ぶ：ロゴ、アイコン、イラスト、チャート、図解、そしてあらゆるサイズで鮮明に表示する必要があるグラフィックに。SVGはベクターフォーマット——無限に拡大でき、品質劣化がなく、シンプルなグラフィックではファイルサイズも小さいのが特徴です。

  • PNGを選ぶ：写真、スクリーンショット、色やディテールの多い複雑なグラフィック、そしてすべてのプラットフォームでピクセル単位の正確な表示が求められる場面に。PNGはラスター形式——正確なピクセルデータを保存し、ロスレス圧縮と完全な透過をサポートしています。

  • フォーマット変換が必要？ svg2img.cc という無料オンラインツールを使えば、ブラウザ上でSVGをPNGに変換——ファイルをサーバーにアップロードせず、プライバシーは完全に保護されます。

なぜこれらの違いが重要なのか、詳しく見ていきましょう。

> SVGとは？

SVGは Scalable Vector Graphics（スケーラブルベクターグラフィックス）の略です。XMLベースのマークアップ言語で、ピクセルのグリッドではなく、数学的な数式と幾何学的プリミティブ（線、曲線、図形、パス）を使って2次元グラフィックスを記述します。

SVGフォーマットとは
SVGフォーマットとは

SVGの主な特徴

ベクターベース： SVGファイルは座標幾何学で画像を定義します。円は色のついたピクセルの集合ではなく、中心点と半径として表されます。つまり、画像をあらゆる寸法にスケーリングできます——16×16のファビコンからビルボードサイズの印刷物まで——品質を全く損なうことなく表示できます。

テキストベースで編集可能： SVGはXML（テキスト形式）で記述されているため、任意のテキストエディタで開いて内容の読み取りや変更ができます。色の変更、パスの調整、要素の追加や削除を、専門のグラフィックデザインソフトウェアなしで行えます。これにより、SVGファイルはGitなどのバージョン管理システムにも最適です。

CSSでスタイリング可能： SVG要素はHTML要素と同じようにCSSに反応します。スタイルシートを使ってフィル、ストローク、不透明度などの視覚プロパティを変更でき、ブランドの一貫性を保ちやすく、テーマの作成も簡単です。

JavaScriptで操作可能： SVGはDOMと深く統合されています。JavaScriptでSVG要素を操作し、インタラクティブなチャート、アニメーションアイコン、データ駆動のビジュアライゼーション、レスポンシブなインフォグラフィックを作成できます。

SEOに有利： 検索エンジンはSVGファイル内のテキスト内容（タイトル、説明、埋め込まれたテキスト）を読み取ることができます。これにより、SVGはラスター形式に比べてSEO上の利点を持っています。特に意味のあるテキストを含むグラフィックで効果的です。

シンプルなグラフィックなら超コンパクト： PNGで5KBかかるようなシンプルなアイコンが、SVGならわずか500バイトになることもあります。要素が少なく、線がきれいなグラフィックでは、SVGは圧倒的に小さいファイルサイズを実現します。

アニメーション対応： SVGは <animate> 要素、SMIL、CSSアニメーションを通じてネイティブのアニメーション機能を備えています。GIFや動画ファイルに頼ることなく、滑らかで解像度に依存しないアニメーションを作成できます。

SVGの限界

SVGは万能ではありません。写真や色のグラデーションが数千ある高精細なイラストなど、複雑な画像はSVGではうまく圧縮できません。実際、写真をSVGで表現しようとすると、同等のPNGやJPEGよりもはるかに大きなファイルになってしまいます。また、非常に複雑で数千の要素を含むSVGファイルでは、レンダリングパフォーマンスが低下する可能性があります。

> PNGとは？

PNGは Portable Network Graphics（ポータブルネットワークグラフィックス）の略です。1995年にGIF形式の優れた特許フリーの代替として作成され、以来Webで最も広く使われる画像フォーマットの一つとなっています。

PNGフォーマットとは
PNGフォーマットとは

PNGの主な特徴

ラスター（ビットマップ）形式： PNGは画像を個々のピクセルのグリッドとして保存し、各ピクセルには特定の色の値が割り当てられます。SVGの数学的な記述とは異なり、PNGは画像内のすべてのピクセルの正確な色を記録します。これにより、PNGは色の変化が複雑で細かいディテールのある画像に最適です。

ロスレス圧縮： PNGはロスレス圧縮を使用しており、ファイル保存時に画像データが一切破棄されません。すべてのピクセルがそのまま保存されます——ノイズ、ぼけ、品質低下は一切ありません。そのため、画像の忠実度が最優先される場面ではPNGが第一選択となります。

完全なアルファ透過： PNGは8ビットの透過（256段階の不透明度）をサポートし、完全に不透明から完全に透明までの滑らかなグラデーションが可能です。これは大きな利点です——JPEGは透過をサポートしておらず、GIFは1ビット透過（各ピクセルが完全に透明か完全不透明のいずれか）しかサポートしていません。

広い色深度： PNGは8ビット（256色パレット）、24ビット（トゥルーカラー — 約1677万色）、32ビット（トゥルーカラー + アルファチャンネル）など、複数の色深度をサポートしています。PNG-24とPNG-32は人間の目が区別できるほぼすべての色を表現できます。

ユニバーサルな互換性： PNGはすべてのWebブラウザ、画像ビューア、グラフィックデザインアプリケーション、オペレーティングシステム、そして過去20年間に製造されたあらゆるデバイスでサポートされています。PNGで互換性の問題に遭遇することはありません。

アニメーション非対応（標準PNG）： 標準のPNGはアニメーションをサポートしていません。APNG（Animated PNG）はアニメーション機能を追加した拡張形式で、ほとんどのモダンブラウザでサポートされていますが、元のPNG仕様の一部ではありません。

PNGの限界

写真のようなコンテンツでは、PNGファイルはJPEGファイルよりもかなり大きくなる傾向があります。ロスレス圧縮はロッシー圧縮ほど劇的なサイズ削減を達成できないからです。アイコンやロゴのようなシンプルなグラフィックでは、PNGファイルは同等のSVGファイルより通常大きくなります。またPNGは固定解像度のフォーマット——元の寸法を超えて拡大すると、ピクセル化やぼやけが目立つようになります。

> SVG vs PNG：徹底比較表

すべての重要な観点で2つのフォーマットを並べて比較しましょう：

特徴SVGPNG
フォーマット種別ベクター（XMLベースのマークアップ）ラスター（ビットマップのピクセルグリッド）
拡大縮小性無限——あらゆるサイズで品質劣化なし固定解像度——拡大すると品質低下
ファイルサイズ（シンプルグラフィック）非常に小さい（アイコンは1KB未満も）中程度（アイコンは通常2-10KB）
ファイルサイズ（複雑な画像）非常に大きくなるか実用的でない一貫して予測可能
透過fill opacity、clip-pathで完全対応完全な8ビットアルファチャンネル（256段階）
アニメーションネイティブ対応（SMIL、CSS、JS）標準PNGは非対応（APNGは限定的）
編集方法テキストエディタ対応、CSSスタイリング、JS操作画像編集ソフトが必要
ブラウザ対応すべてのモダンブラウザ（IE9+）完全対応（すべてのブラウザ・デバイス）
印刷品質あらゆる解像度で優秀元の解像度に依存；高DPIが必要
SEOへの影響テキストがインデックス可能；インラインSVGがページ構造を改善Altテキストのみ；内部コンテンツのインデックスなし
圧縮方式GZIP（テキスト圧縮）ロスレスPNG圧縮
色深度無制限（コードで定義）最大32ビット（1677万色 + Alpha）
写真コンテンツ不適切優秀
アクセシビリティARIA属性対応、読み取り可能なテキストAltテキストとコンテキストのみ
読み込み性能小さいファイルは高速；複雑なSVGはレンダリングが遅い場合もデコード速度は一定；大きいファイルは読み込みに時間がかかる
SVG vs PNG 比較チャート
SVG vs PNG 比較チャート

> SVGを使うべきケース

以下のシナリオでは、SVGが圧倒的な選択肢です：

1. ロゴとブランドマーク

ロゴはあらゆる場所で完璧に見える必要があります——小さなスマホ画面、大きなデスクトップモニター、名刺、そして看板。SVGはあらゆるサイズでシャープなエッジを保証します。PNGロゴの場合、同じ結果を得るには複数の解像度（1x、2x、3x）でエクスポートする必要があり、それでも完全な将来保証にはなりません。

2. アイコンとアイコンセット

UIアイコンは通常、色が限られたシンプルな図形——まさにSVGが得意とするタイプのグラフィックです。SVGアイコンセットは1つのスプライトファイルにまとめられ、CSSでスタイリングでき、HTTPリクエストを減らしつつ、アプリケーション全体のアイコン色を簡単に変更できます。ファイルサイズもPNGよりも劇的に小さいことが多いです。

3. イラストとラインアート

フラットデザインのイラスト、技術図、フローチャート、ラインアートはすべてSVGに最適です。これらのグラフィックは通常、クリーンな線、単色、幾何学的な図形を使用しており、SVGはこれらすべての要素を効率的かつ正確に表現できます。

4. データビジュアライゼーションとチャート

インタラクティブなチャート、グラフ、ダッシュボードはSVGの大きな恩恵を受けます。SVG要素はDOMに存在するため、イベントリスナー、ツールチップ、ホバーエフェクト、リアルタイムのデータ更新を付加できます。D3.js、Chart.js、Rechartsなどの主要なチャートライブラリがSVGを使用しているのはこのためです。

5. アニメーショングラフィック

SVGアニメーションは解像度に依存せず、通常GIFや動画の代替よりもはるかに小さいファイルサイズです。ローディングスピナー、アニメーションアイコン、マイクロインタラクション、装飾的なアニメーションはすべてSVGで美しく動作します。CSSアニメーション、SMIL、JavaScriptのいずれかを使って——ワークフローに合った方法を選べます。

6. レスポンシブデザイン要素

グラフィックが無数の画面サイズとピクセル密度に適応する必要のあるレスポンシブなWeb環境では、SVGが複数の画像ファイルの必要性を排除します。1つのSVGファイルがすべてのブレークポイントとデバイスに対応します。

7. 印刷用グラフィック

SVGのベクター性質により、レンダリングするデバイスの最大解像度で出力されます——高DPIの印刷環境も含めて。画面と印刷の両方に向けたグラフィックにとって、SVGは理想的なソースフォーマットです。

> PNGを使うべきケース

以下の状況ではPNGがより良い選択です：

1. 写真とリアルな画像

画像が写真である場合、または複雑なカラーグラデーションを持つリアルな要素を含む場合、PNGが適切な選択です（透過が不要な場合はJPEGがさらに良いかもしれません）。SVGは写真に含まれる数百万の微妙な色の変化を効率的に表現できません。

2. スクリーンショット

スクリーンショットは画面上の内容のピクセル単位の正確なキャプチャです。PNGはすべてのピクセルを正確に保存し、スクリーンショットの標準フォーマットとなっています。スクリーンショットのピクセルベースの性質上、ベクター表現による利点はありません。

3. 複雑なデジタルアートとテクスチャ付きグラフィック

豊かなテクスチャ、ノイズパターン、水彩効果、または数千の細かいディテールを持つ画像は、PNGに向いています。これらの要素はベクターパスとしてうまく圧縮できず、SVGファイルが非現実的なほど大きくなってしまいます。

4. 互換性を保証したい場合

SVGは今日のブラウザで優れたサポートを得ていますが、PNGがより安全な選択であるコンテキストがまだあります——メールテンプレート、一部のCMSプラットフォーム、古いソフトウェア、SVGアップロードを受け付けない一部のソーシャルメディアプラットフォームなどです。

5. 透過付きの装飾画像

滑らかな透過を伴う複雑な装飾画像が必要な場合——透明な背景を持つ商品写真やウォーターマークのオーバーレイなど——PNGの8ビットアルファチャンネルが高品質で滑らかな透過を提供します。

6. 高DPIラスターグラフィック

ラスターグラフィックをRetina/高DPIディスプレイでシャープに表示する必要がある場合、2倍または3倍の解像度でPNGとしてエクスポートします。SVGが理想的ですが、ラスターのソース素材しかない場合もあり、PNGはそれを完璧に保存します。

> SVGとPNGの相互変換

両方のフォーマットが必要になることもあります——Webサイト用にSVG、SVGアップロードをサポートしていないプラットフォーム用にPNG、またはラスター形式を必要とする印刷サービス用にPNGなど。フォーマット間の変換は簡単です。

SVGからPNGへの変換

SVGからPNGへの変換が最も一般的な方向です。多くのプラットフォーム（ソーシャルメディア、メールクライアント、一部のCMS）がSVGアップロードをサポートしていないからです。変換時に選択する必要がある項目：

  • 出力寸法： PNGは固定解像度フォーマットなので、ピクセル寸法を指定する必要があります。Web使用の場合、表示サイズの2倍または3倍でエクスポートすることでRetinaディスプレイでの鮮明さを確保できます。
  • 背景色： SVGは透過をサポートしています。PNG出力の背景を透明にするか、単色で塗りつぶすかを選択できます。
  • 品質設定： PNGはロスレスなので品質は通常問題になりませんが、適切な色深度（8ビット、24ビット、32ビット）の選択がファイルサイズと透過サポートに影響します。

SVGからPNGへの最も簡単な変換方法は、svg2img.cc のような無料オンラインツールを使うことです。SVGコードを貼り付けるかSVGファイルをドラッグするだけ。出力設定を選んでPNGをダウンロード——すべての処理はブラウザ内で行われ、ファイルを外部サーバーにアップロードせず、データのプライバシーが完全に保護されます。

svg2img.ccで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で直接ベクターグラフィックを作成してください。

SVGファイルがPNGファイルより大きいのはなぜですか？

これは通常、SVGに埋め込まれたラスター画像（<image> タグ経由）、数千のポイントを持つ過度に複雑なパス、または不要なメタデータが含まれている場合に起こります。パスの簡略化、未使用要素の削除、SVGOなどのツールを使って不要なデータを取り除くことで、SVGを最適化してみてください。

SVGはPNGのような透過をサポートしていますか？

はい。SVGはフィルの不透明度、ストロークの不透明度、クリップパスを通じて完全な透過をサポートしています。実際、SVGの透過は解像度に依存しませんが、PNGの透過はピクセルごとに定義されます。両フォーマットとも透過を優れた形で処理しますが、実装方法は異なります。

どちらのフォーマットがWebサイトで速く読み込まれますか？

コンテンツによります。シンプルなアイコンやロゴの場合、SVGファイルは通常はるかに小さく、読み込みが高速です。写真の場合、PNGファイルは大きくなります——速度が重要な写真コンテンツにはJPEGがより良い選択かもしれません。SVGはHTMLにインライン化することもでき、HTTPリクエストを完全に省略できます。

SVGはAPNGのようにアニメーションできますか？

SVGのアニメーション機能はAPNGをはるかに凌ぎます。SVGはCSSアニメーション、SMILアニメーション、JavaScript駆動のアニメーションをサポート——すべて解像度に依存せず、通常APNGよりファイルサイズも小さいです。APNGは本質的にアニメーション画像シーケンスですが、SVGアニメーションはプロシージャルでインタラクティブです。

SVGはSEOに役立ちますか？

はい、SVGには自然なSEOの利点があります。インラインSVGの内容は検索エンジンが読み取れ、SVG内のテキストはインデックス可能で、構造化メタデータ（タイトル、説明）を含めることもできます。画像検索の最適化において、説明的なファイル名とAltテキストを組み合わせたSVGグラフィックは検索での視認性を向上させます。

SVGを無料でPNGに変換するにはどうすればいいですか？

svg2img.cc を使ってください——無料のブラウザベースのSVG→画像変換ツールです。すべての処理はブラウザ内でローカルに行われ（ファイルを外部サーバーにアップロードしません）、複数の出力フォーマットに対応し、寸法や背景設定もカスタマイズできます。高速でプライベート、そして完全に無料です。

> まとめ

SVG vs PNG の問いは、どちらのフォーマットが客観的に優れているかではありません——仕事に合った適切なツールを選ぶことです：

  • SVGを選ぶ——スケーラビリティ、シンプルなグラフィックの小さいファイルサイズ、CSS/JSインタラクティビティ、アニメーション、そしてSEOの利点が必要な時に。SVGはロゴ、アイコン、イラスト、チャート、そしてあらゆるサイズで完璧に見える必要があるグラフィックに理想的です。

  • PNGを選ぶ——ピクセルパーフェクトなラスター画像、写真、スクリーンショット、色豊かな複雑なアートワーク、完全なアルファ透過、そして確実なユニバーサル互換性が必要な時に。

  • 変換が必要？ svg2img.cc で無料、プライベート、ブラウザベースのSVG→PNG変換を——サーバーへのアップロードなし、登録不要。

両フォーマットの強みと限界を理解することで、プロジェクトのあらゆる画像において正しい選択ができ、表示品質とパフォーマンスの両方を最適化できます。