Web グラフィックスの SVG と PNG: 各形式をいつ使用するか

SVG と PNG は根本的に異なる目的を果たしますが、混乱を引き起こすほど重複しています。 1 つは数学的な形状を保存します。もう 1 つはピクセルを保存します。間違ったものを選択すると、品質かパフォーマンスのどちらかが犠牲になり、場合によっては両方が犠牲になります。

SVG (Scalable Vector Graphics) は、XML に基づくベクトル形式です。ピクセル データを保存する代わりに、数学的座標を使用して形状、パス、テキストを記述します。 SVG ファイルは本質的にコードです。テキスト エディターで開き、ブラウザーに画像の描画方法を指示する指示を読むことができます。

SVG は CSS でスタイル設定し、JavaScript で操作できます。 viewBox 属性を調整することで、ホバー時に色の変更、個々の要素のアニメーション化、SVG の応答性の向上を行うことができます。ロゴやアイコンなどの単純なグラフィックの場合、SVG の重さは通常 1 ～ 5 KB です。

PNG (Portable Network Graphics) は、画像をカラー ピクセルのグリッドとして保存するラスター形式です。可逆圧縮を使用しているため、品質はオリジナルと同じであり、JPEG のような圧縮アーティファクトはありません。 PNG は完全な透明度 (アルファ チャネル) をサポートしているため、透明な背景が必要な画像に最適です。

PNG は、スクリーンショット、透明度のある写真、詳細なテクスチャ、滑らかなグラデーションなど、複雑な画像の再現に優れています。ただし、PNG ファイルはすべてのピクセルを保存するため、サイズが大きくなる可能性があります。 PNG としての 4K スクリーンショットは、軽く 5 MB を超えることがあります。

一般的な企業ロゴの場合、SVG バージョンの重さは 2 ～ 5 KB になる可能性があります。 Retina ディスプレイ用に 2 倍の解像度で PNG としてエクスポートされた同じロゴは、簡単に 30 ～ 80 KB になる可能性があります。それは10～15倍の差です。

これをページ上のすべてのアイコン、ロゴ、UI 要素に掛け合わせると、SVG のペイロードは劇的に軽くなります。 60 個以上のアイコンを含む e コマース サイトでテストした結果、PNG から SVG に切り替えると、アイコン関連の帯域幅が 87% 削減されました。

しかし、この利点は複雑なグラフィックスでは裏返しになります。何千ものアンカー ポイントと詳細なパスを含む SVG イラストは、実際には、十分に圧縮された PNG のファイル サイズを超えることがあります。デザイナーが何百もの個別の要素を含むイラストを作成した場合は、両方の形式を確認して比較してください。

これが SVG の利点です。 SVG は、32 ピクセル幅で表示しても、3200 ピクセル幅で表示しても、ピクセル完璧に見えます。解像度の概念はありません。ブラウザは必要なサイズでベクター パスを再描画します。

これは、72 DPI デスクトップ モニターから 460 DPI 以上の携帯電話までの範囲の画面で重要です。 1 つの SVG ファイルですべてのデバイスをカバーします。 1 つの PNG にはそうではありません。

PNG には固定ピクセル グリッドがあります。 200x200 の PNG を 400x400 ピクセルで表示すると (これは Retina ディスプレイで発生します)、ブラウザーが補間して、画像が柔らかく見えたり、ぼやけて見えたりします。回避策は、PNG を 2 倍または 3 倍の解像度でエクスポートすることですが、それに比例してファイル サイズが増加します。3 倍のアイコン セットは 9 倍大きくなる可能性があります。

画像が写真的である場合、または写真的に複雑な場合には、PNG が正しい選択です。スクリーンショット、透明度のある製品写真、複雑なテクスチャ、数千の色と微妙なグラデーションを含む画像 - これらはすべてラスター形式に属します。

PNG は、特定のサイズですべてのピクセルが重要となるピクセル アートや画像にも最適です。ゲームのスプライト、16x16 のファビコンの詳細、およびアンチエイリアス動作を正確に制御する必要がある画像はすべて PNG として提供する方が適しています。

ロゴ、アイコン、イラスト、インフォグラフィック、地図、チャート、UI 要素など、きれいな形状、線、単色で構成されるものであれば、SVG が断然勝者です。グラフィックが Figma または Illustrator で作成された場合、SVG としてエクスポートすると、ソースの品質が完全に保持されます。

SVG はレスポンシブ デザインにも優れています。 SVG 自体内の CSS メディア クエリを使用して、さまざまなブレークポイントで要素をリフローまたは非表示にする SVG イラストを作成できます。 SVG のアイコンは、別個の画像ファイルを提供しなくても、テーマ (ダーク モード/ライト モード) に基づいて色を変更できます。

SVG には、検索エンジンがインデックスを作成できる実際のテキスト要素を含めることができます。インフォグラフィックに見出しとラベルが SVG テキストとして含まれている場合、Google はそれらを読み取ることができます。これは、すべてのテキストがピクセル グリッドに焼き付けられ、クローラーには見えなくなる PNG に比べて、SEO において重要な利点です。

スクリーン リーダーの場合は、適切なインライン SVG role そして aria-label 属性はラスター イメージよりも優れたアクセシビリティを提供します。 PNG 画像は完全に 代替 アクセシビリティのための属性。

フォーマットを切り替える必要がありますか?できます SVGをPNGに変換 ソーシャル メディア共有、SVG をレンダリングしない電子メール クライアント、またはラスター イメージのみを受け入れるプラットフォームにラスター バージョンが必要な場合。

反対方向に進むと、次のことができます。 PNGをSVGに変換 ベクトルのスケーラビリティの恩恵を受ける画像の場合。この変換は、エッジがきれいで色が限られたシンプルなグラフィックで最も効果的に機能します。詳細な写真は SVG にうまく変換できません。

ソフトウェアをインストールせずにフォーマットをすばやく変更するには、 iformat.io 両方の変換をブラウザで直接処理します。アップロード、変換、ダウンロードは 10 秒以内に完了します。

ロゴ、アイコン、イラストなど、きれいな形状のものには SVG を使用します。SVG は完全に拡大縮小され、ファイルのサイズも小さく抑えられます (通常 1 ～ 5 KB)。スクリーンショット、透明度のある写真、ピクセル精度のアートワークには PNG を使用します。ほとんどの Web プロジェクトでは、アイコン セットを PNG から SVG に変換すると、ページの重量が削減され、高 DPI 画面でのレンダリングが向上します。疑わしい場合は両方の形式をテストしてください。ファイル サイズの比較には 30 秒かかりますが、通常は正しい選択が明らかです。