SVG vs PNG: いつ変換すべきか、その方法
· 12分で読めます
目次
SVGとPNGを理解する
デジタルグラフィックスの世界では、Web用途で2つのフォーマットが際立っています: SVGとPNGです。それぞれが異なる目的を果たし、その強みを理解することで、どちらを使用するか、そしていつ変換が意味を持つかについて、より良い判断ができるようになります。
SVG(Scalable Vector Graphics)は、XMLベースのベクター画像フォーマットです。各ピクセルの色情報を保存する代わりに、SVGファイルは数式を使用して図形を記述します—線、曲線、点、色がコードで定義されます。つまり、SVGファイルは本質的にテキストドキュメントであり、ブラウザがそれを解釈してグラフィックスとしてレンダリングします。
SVGはコードベースであるため、任意のテキストエディタでSVGファイルを開いて実際のマークアップを見ることができます。シンプルな円は次のようになります:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#4f46e5" />
</svg>PNG(Portable Network Graphics)は、画像をピクセルのグリッドとして保存するラスター画像フォーマットです。各ピクセルは色と透明度のデータを保持します。PNGは可逆圧縮をサポートしており、ファイルを保存する際に画像データが失われないため、透明度が必要なWebグラフィックスに人気があります。
SVGとは異なり、PNGファイルはバイナリデータです。テキストエディタで開いて内容を読むことはできません—中身を見るには画像表示または編集ソフトウェアが必要です。
クイックヒント: SVGファイルはコードエディタ、FigmaやAdobe Illustratorなどのデザインツール、またはJavaScriptを使用してブラウザで直接編集できます。PNGファイルはPhotoshop、GIMP、またはオンラインエディタなどの画像編集ソフトウェアが必要です。
ベクターとラスター: 主な違い
SVGとPNGの根本的な違いは、画像の表現方法にあります。この違いは、ファイルサイズからスケーラビリティ、編集の柔軟性まで、すべてに影響します。
スケーラビリティと解像度
スケーラビリティは、SVGが真に輝く部分です。ベクターグラフィックスはピクセルではなく数学で定義されているため、SVGを任意のサイズ—小さなファビコンから看板まで—に拡大縮小しても、品質が全く損なわれません。ブラウザは必要なサイズで図形を単純に再計算します。
一方、PNGは固定解像度を持っています。200×200ピクセルのPNGを2000×2000に拡大すると、ぼやけてピクセル化された画像になります。ブラウザは既存のピクセル間のギャップを埋めるべき色を推測する必要があり、目に見える劣化につながります。
ファイルサイズの考慮事項
ファイルサイズは、画像の複雑さによって劇的に変化します。ロゴ、アイコン、単色のイラストなどのシンプルなグラフィックスの場合、SVGファイルは通常、同等のPNGよりもはるかに小さくなります。PNGで50KBになるロゴが、SVGではわずか2-3KBになることもあります。
しかし、複雑な画像では状況が逆転します。何千もの図形、グラデーション、エフェクトを持つ写真や詳細なイラストは、巨大なSVGファイルを生成する可能性があります。このような場合、PNG(または写真の場合はJPEG)がより効率的な選択となります。
| 特性 | SVG | PNG |
|---|---|---|
| 画像タイプ | ベクター(数学的) | ラスター(ピクセルベース) |
| スケーラビリティ | 品質劣化なしで無限 | 固定解像度、拡大縮小で劣化 |
| 最適な用途 | ロゴ、アイコン、シンプルなイラスト | 写真、複雑なグラフィックス、スクリーンショット |
| ファイルサイズ | シンプルなグラフィックスでは小さい | 大きい、寸法に依存 |
| 透明度 | 完全サポート | 完全サポート(アルファチャンネル) |
| アニメーション | ネイティブCSS/JSアニメーションサポート | APNGまたは外部ツールが必要 |
| 編集可能性 | テキストベース、簡単に変更可能 | 画像編集ソフトウェアが必要 |
| SEO価値 | テキストコンテンツがインデックス可能 | SEOにはaltテキストが必要 |
編集と操作
SVGファイルは、編集において比類のない柔軟性を提供します。テキストベースであるため、コードで直接、またはデザインソフトウェアで色、図形、プロパティを変更できます。CSSやJavaScriptでSVG要素をアニメーション化することもでき、追加のライブラリなしでインタラクティブなグラフィックスを作成できます。
PNGの編集には、画像編集ソフトウェアでのピクセルレベルの操作が必要です。PNGを保存すると、個々の要素を簡単に変更することはできません—すべてがピクセルグリッドに焼き付けられた平坦化された画像を扱うことになります。
SVGを使用すべき場合
SVGは、そのベクター性が明確な利点を提供する特定のシナリオで優れています。これらのユースケースを理解することで、最初から適切なフォーマットを選択できます。
ロゴとブランドアセット
企業ロゴはほぼ常にSVGであるべきです。名刺から看板まで、あらゆるものでシャープに見える必要があり、SVGの無限のスケーラビリティがこれを容易にします。単一のSVGファイルは任意のサイズで完璧に機能し、異なる解像度で複数のPNGバージョンを維持する必要がなくなります。
アイコンとUI要素
インターフェースアイコンは完璧なSVG候補です。通常、単色のシンプルな図形であり、非常に小さなファイルサイズになります。Font AwesomeやHeroiconsなどのアイコンライブラリは、軽量で高DPIディスプレイで美しくスケールするため、SVGバージョンを配布しています。
現代のWeb開発は、次の理由からSVGアイコンを強く支持しています:
- CSSで動的に色を変更できる
- 個々の要素をアニメーション化できる
- すべての画面密度でシャープなレンダリングを保証
- SVGコードをインライン化してHTTPリクエストを削減
データビジュアライゼーションとチャート
チャート、グラフ、インフォグラフィックスはSVGから大きな恩恵を受けます。D3.jsやChart.jsなどのライブラリは、スムーズなアニメーション、インタラクティブな要素、任意のズームレベルでの完璧な明瞭さを可能にするため、SVG出力を生成します。ユーザーは詳細を失うことなく複雑なチャートにズームインできます。
レスポンシブグラフィックス
異なる画面サイズに適応するグラフィックスが必要な場合、SVGが理想的です。CSSメディアクエリを使用してビューポートサイズに基づいてSVG要素を変更し、モバイルとデスクトップでレイアウトや詳細レベルを変更する真にレスポンシブなイラストを作成できます。
プロのヒント: 異なるデバイスや画面密度で品質を維持する必要があるグラフィックスにはSVGを使用してください。4KディスプレイやRetinaスクリーンの普及により、SVGは複数のファイルバージョンを必要とせずに、グラフィックスが常にシャープに見えることを保証します。
アニメーショングラフィックス
SVGは、CSSとJavaScriptを通じてネイティブアニメーションをサポートしています。外部ライブラリなしで、個々のパス、図形、プロパティをアニメーション化できます。これにより、SVGはローディングスピナー、アニメーションイラスト、インタラクティブな図に最適です。
PNGを使用すべき場合
SVGの利点にもかかわらず、PNGは多くのWebグラフィックスにとって不可欠です。PNGを選択すべき時を知ることで、パフォーマンスの問題や互換性の問題を回避できます。
写真と複雑な画像
写真は決してSVGにすべきではありません。写真をベクターフォーマットに変換すると、品質が低く巨大なファイルが作成されます。PNG(または透明度のない写真の場合はJPEG)が写真コンテンツの正しい選択です。
何千もの色、グラデーション、エフェクトを持つ複雑なデジタルアートワークにも同じことが当てはまります。ラスターフォーマットは、この複雑さをベクターフォーマットよりもはるかに効率的に処理します。
スクリーンショットと画面キャプチャ
スクリーンショットは本質的にラスター画像です—画面に表示されるもののピクセル完璧なキャプチャです。PNGは、(JPEGとは異なり)圧縮アーティファクトなしでテキストの明瞭さとインターフェースの詳細を保持するため、理想的です。
ピクセルアートとレトログラフィックス
ピクセルアートは個々のピクセルを中心に設計されているため、PNGが自然なフォーマットです。SVGは完全に的外れです—ピクセルアートの美学は、滑らかなベクター曲線ではなく、目に見えるピクセルに依存しています。
写真効果のある画像
製品モックアップやソーシャルメディアグラフィックスなど、写真とデザイン要素を組み合わせたグラフィックスは、PNGとしてより良く機能します。写真部分は肥大化したSVGファイルを作成しますが、PNGは構成全体を効率的に処理します。
メールグラフィックス
メールクライアントは、SVGサポートが非常に一貫性がありません。多くの人気のあるメールクライアントは、SVGを全くサポートしていないか、信頼性の低いレンダリングを行います。PNGは、すべてのメールクライアントとデバイスでメールグラフィックスが正しく表示されることを保証します。
クイックヒント: メールマーケティング用にデザインする場合は、常にPNGまたはJPEGを使用してください。メールクライアントでのSVG互換性の問題の手間は、潜在的なファイルサイズの節約に見合いません。
SVGをPNGに変換すべき場合
SVGがより良いフォーマットのように見えても、SVGをPNGに変換する必要がある場合があります。この変換が必要な正当なシナリオがいくつかあります。
レガシーシステムの互換性
古いコンテンツ管理システム、デザインツール、または独自のソフトウェアはSVGをサポートしていない場合があります。ラスターフォーマットのみを受け入れるレガシーシステムで作業している場合、変換が必要になります。
一部のプリントオンデマンドサービスや商品プラットフォームも、ベクターファイルとしてより良く機能するシンプルなロゴであっても、PNGまたはJPEGのアップロードを要求します。
ソーシャルメディアとプラットフォームの要件
ソーシャルメディアプラットフォームには特定の画像要件があります。一部のプラットフォームは特定のユースケースでSVGをサポートしていますが、ほとんどはプロフィール写真、カバー写真、投稿画像にPNGまたはJPEGを要求します。
プラットフォーム固有の要件には次のものがあります:
- Facebook: プロフィール写真とカバー写真はPNGまたはJPEGである必要があります
- Twitter: ヘッダー画像はPNGまたはJPEGフォーマットが必要です
- LinkedIn: 背景画像とプロフィール写真にはラスターフォーマットが必要です
- Instagram: すべてのアップロードはPNGまたはJPEGである必要があります
メールマーケティングキャンペーン
前述のように、メールクライアントのSVGサポートは信頼性がありません。SVGグラフィックスをPNGに変換することで、Gmail、Outlook、Apple Mail、その他のメールクライアント全体で一貫したレンダリングが保証されます。
これは、視覚的な一貫性がエンゲージメントとコンバージョン率に直接影響するトランザクションメール、ニュースレター、マーケティングキャンペーンにとって特に重要です。
サムネイル生成
多くのシステムは、アップロードされた画像から自動的にサムネイルを生成します。これらのサムネイルジェネレーターは、多くの場合、ラスターフォーマットでのみ動作します。適切な寸法でSVGをPNGに変換することで、サムネイルが正しく表示されることが保証されます。
ドキュメントへの埋め込み
Microsoft Officeドキュメント、Google Docs、PDFファイルは、さまざまなレベルのSVGサポートを持っています。PNGに変換することで、プレゼンテーション、レポート、ドキュメントに埋め込まれたときにグラフィックスが正しく表示されることが保証されます。
複雑なSVGのパフォーマンス最適化
皮肉なことに、複雑なSVGをPNGに変換することでパフォーマンスが向上する場合があります。SVGに何千ものパスと複雑なエフェクトが含まれている場合、ブラウザはこれらすべての要素を計算してレンダリングする必要があります。PNGバージョンの方が実際に高速に読み込まれ、レンダリングされる可能性があります。
これは、スケーラビリティの利点が重要でないヒーロー画像や大きな装飾的なグラフィックスに特に関連します—特定のサイズでのみ画像を表示しています。
SVGをPNGに変換する方法
SVGをPNGに変換する方法は複数あり、それぞれがニーズと技術的な快適さのレベルに応じて異なる利点があります。
オンライン変換ツール
オンラインコンバーターは、時々の変換に最も迅速なソリューションを提供します。当社のSVGからPNGへのコンバーターは、SVGファイルをアップロードし、希望の寸法を設定し、PNG結果をダウンロードするシンプルなインターフェースを提供します。