[解決済み] 現代のウェブサイトにおけるSVGアイコンとPNGアイコンの比較

質問

最近の Web サイトで、アイコンに PNG のみを使用するサイトがまだ少ないのはなぜでしょうか (ただし、この推測は私の観察に基づくものです)。私が知る限り、SVG よりも PNG を使用する主な理由は IE8 と SVG がより多くの CPU パワーを使用することです (ただし、単純な 1K アイコンではこれが問題であるとは思いません)。スプライトとして、画像として、またはインラインSVGとして使用する場合、私はSVGを使用する多くの利点を見ることができます（そして現在、私たちはそれを使用しています）。

(質問 研究を探しています。PNGスプライト vs SVGスプライト vs アイコンフォント は性能に重点を置いており、関連する回答はありません。 アイコンフォント対SVGのキャッシュとネットワークへの懸念 はネットワークトラフィックに焦点を当てていますが、テンプレート化などで簡単に解決できます)。

新しい Web サイトがモダン ブラウザのみをサポートする場合、SVG を使用しない理由はありますか (または - アイコンに PNG を使用する理由はありますか)。もし私たちがIE8を気にせず、SVGの使用がテンプレート化および/またはキャッシュによってバックアップされているなら、SVGのみに依存するキャッチはあるのでしょうか？

どのように解決するのですか?

SVGがよい理由。

• あらゆるサイズのブラウザをシームレスにサポートし、特に css の background-size
• を使用することで、拡大・縮小が可能で、例えば ホバー効果
• SVG を埋め込んで、JavaScript と DOM を使ってリアルタイムに変更することができます。
• SVG や SVG の一部を CSS でスタイルすることができます (色やアウトラインの変更など)。
• クライアントまたはサーバーで、SVG を動的に生成することができます。 テキストベースであるため、低レベルのライブラリや強力なサーバーは必要ありません。

PNG が良い選択であるかもしれない理由。

• ブラウザのサポート
• PNGスプライトシートを作成するための既存のツール
• ほとんどの人が自分のコンピュータに PNG 互換のエディタを持っています。
• グラフィックは写真やベクター化しにくい画像です。

その他の懸念事項

• SVG エディタの中には、SVG にメタデータを保存してファイルサイズを増加させたり、意図せずにデータを公開してしまうものがあります。
  • 例: InkscapeでPNGをエクスポートすると、保存時にそのディレクトリへの絶対パスがSVGに保存されることがありました/されました。
  • SVG圧縮ツールはこれを削除するかもしれませんが、私はテストしていません (テストしているなら自由に編集してください)。