主な違い: ラスター ビットマップとベクター パス
ユーザー インターフェース、ナビゲーション バー、マーケティング ウェブサイトをデザインする場合、PNG と SVG のいずれかを選択することで、さまざまなデバイスでグラフィックがどの程度鮮明に表示されるか、およびページのレンダリング速度が決まります。
- PNG (ポータブル ネットワーク グラフィックス): ピクセルの 2 次元グリッドから構築されたラスター形式。各ピクセルには、正確な色と透明度 (アルファ チャネル) 情報が保存されます。
- SVG (スケーラブル ベクター グラフィックス): 座標を使用して線、曲線、多角形、塗りつぶしを数学的に記述する XML ベースのベクター形式。
Retina ディスプレイと無限のスケーリング
4K、5K、高 DPI のモバイル画面が普及するにつれて、スケーリング動作が重要になります:
- PNG ビットマップ: 24x24 ピクセルの PNG アイコンを 96x96 ピクセルに拡大する場合、または 3 倍の Retina ディスプレイで表示する場合、ブラウザは中間ピクセルを補間する必要があり、目に見えるぼやけやぼやけが発生します。エッジ。
- SVG ベクトル: SVG は、ズーム レベルに関係なく、100% 鮮明なままで、任意のビューポート幅またはピクセル密度でベクター ポイントをその場で再計算します。
ピクセルを劣化させずに従来のラスター グラフィックを変換したり画像のサイズを変更するには、Toolfen の 画像リサイズツール (Image Resizer) および PNG・JPG変換ツール (PNG to JPG)を使用します。
ファイル サイズ、ネットワーク ペイロード、DOM フットプリント
| 指標 | SVG アイコン | PNGアイコン |
|---|---|---|
| 平均ファイル サイズ | 0.8 KB – 2.5 KB | 3 KB – 15 KB |
| Gzip / ブロトリ圧縮 | 高圧縮性 (テキスト/XML) | 中程度の圧縮性圧縮可能 |
| CSS カラー オーバーライド | 塗りつぶしによるインスタント: currentColor | フィルタのハックまたはファイルの交換が必要です |
| アニメーション機能 |ネイティブ CSS / SVG トランジション |静的のみ (APNG を除く) |
意思決定マトリックス: SVG と PNG のどちらを選択するか
- SVG を使用する場合: ブランド ロゴ、ナビゲーション バー アイコン、UI ステータス バッジ、幾何学的なイラスト、インタラクティブな切り替え。
- PNG を使用する場合: 複雑なスクリーンショット半透明のドロップ シャドウ、何百ものカラー グラデーションを備えた写実的なバッジ、最新のベクター サポートが欠けているレガシー環境。
ToolDolfen の 画像ツール スイート にアクセスして、クライアント側の速度でアセットを圧縮、変換、トリミングします。
推奨コンパニオン ガイド
このトピック クラスタから補完的なチュートリアルとユーティリティを探索して、デジタル ワークフローを強化します: