最新のWebサイトのSVGアイコンとPNGアイコン

なぜ現代のWebサイトでアイコンにPNGのみを使用しているのか疑問に思っています（ただし、この仮定は私の観察に基づいています）。これまでのところ、SVGではなくPNGを使用する主な理由はIE8であり、SVGはより多くのCPUパワーを使用します（ただし、これが単純な1Kアイコンの問題であるとは思わない）。スプライト、画像、またはインラインSVGとして使用する場合、SVGを使用することには多くの利点があります（現在は使用しています）。

（調査を探している質問：PNGスプライトvs SVGスプライトvsアイコンフォントはパフォーマンスに焦点を当てており、関連する答えはありません。アイコンフォントvs. SVGキャッシングとネットワークの懸念はネットワークトラフィックに焦点を当てていますが、テンプレートなどで簡単に解決できます。）

新しいWebサイトが最新のブラウザーのみをサポートしている場合、SVGを使用しない理由はありますか（または-アイコンにPNGを使用する理由はありますか）？IE8を気にせず、SVGの使用がテンプレート化やキャッシュによってバックアップされている場合、SVGのみに依存するキャッチはありますか？

SVGが良い選択かもしれない理由：

• 特にcssを使用して、あらゆるサイズのブラウザをシームレスにサポートします background-size
• ホバー効果など、スケールアップ/スケールダウンできます。
• SVGを埋め込んで、JavaScriptとDOMを使用してリアルタイムで変更することができます
• CSSを使用してSVGおよびSVGの一部のスタイルを設定できます（色、アウトラインの変更など）
• クライアントまたはサーバーのいずれかで、SVGを動的に生成できます。テキストベースの性質があるため、それらを作成するために低レベルのライブラリや強力なサーバーは必要ありません。

PNGが良い選択かもしれない理由：

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

その他の懸念：

• 一部のSVGエディターは、メタデータをSVGに保存し、ファイルサイズを大きくし、意図せずにデータを公開する可能性があります
  • たとえば、InkscapeでPNGをエクスポートすると、保存時にSVGのこのディレクトリへの絶対パスが保存されます。
  • SVGコンプレッサーはこれを削除するかもしれませんが、私はそれをテストしていません（もしあれば自由に編集してください）

SVGはクールで（FakeRainBrigandがうまく説明されている方法）、美しくレンダリングされますが、かなり複雑になる可能性があります。ブラウザは、ピクセルベースの画像の代わりにベクトルデータを処理するときにやるべきことがたくさんあります。画像は1つの要素であり、SVGには多くの子があり、インラインで使用するとDOMに追加することもできます。

私は貴重なパフォーマンステストを行いませんでしたが、論理的な観点から、特に中年のモバイルブラウザ（CPUストレス）を扱う場合は、パフォーマンスに関してSVGを慎重に使用する必要があります。さまざまなAndroidおよびIOSデバイスで100個のSVG画像と100個のPNG画像によって消費されるCPU電力を確認できるグラフがあると非常に便利です...

SVGのもう1つのバグは、ブラウザや古き良きIEに関係なく、一部のAndroid / Samsungではタグに幅と高さの属性が必要なことです。また、A *** e Illustratorなどの最新のSVGエディターは、「viewBox」属性を追加するだけです。

SVGの最も優れた点は、どのピクセル密度でもきれいに鮮明に表示されることです。

非常に単純な形状/デザインを表示している場合、またはアプリでグラフィックの一部を特に変更する必要がある場合を除いて、SVGを使用するインセンティブはそれほど多くありません。PNGを元のサイズの2倍（Retinaディスプレイの場合）で作成しても、ファイルサイズを1桁小さくすることができます。もちろん、レガシーブラウザーのカバレッジが向上します（JavaScriptやポリフィルは必要ありません）。

私はこれをベクターグラフィックスでUIを構築する人として言います。これは素晴らしいデザインツールですが、配信/帯域幅/リーチに関しては、PNGを超えることは困難です。ちょうど昨夜、私は有名なロゴをテストしました。CocaCola.svgはほぼ20Kでした。単色/フラットカラーだったので、12色のパレット圧縮でPNG-8としてエクスポートし、1.6Kに下げました（!!!）ほんの数個のロゴでは大したことではありませんが、40を表示する必要がある場合それらの..まあ、あなたは絵を手に入れます。

最良の部分は、PNGをbase64データURIに変換し、スタイルシートに正しく埋め込むことができることです。これは、特にモバイルブラウザでのパフォーマンスと互換性の問題ですでに有名な形式であるSVGでは推奨されません。

最後に、両方に長所と使用例があると言わなければなりませんが、PNGはより多くの道を切り開いており、現在の状況に対応するときの抵抗は少なくなっています。SVGの方が適しているという奇妙なケースについては、この記事とこの学習リソースを強くお勧めします。

ハッピーデザイン！

確かに、pngはほとんどどこでも使用されています。これは、ほとんどの場合、SVGがまったく役に立たないためだと思います。画像は大きくする必要があり（私は思う）、ズームするたびにコンピューターが画像を再生成する必要があります（常に画像をズームするためですよね？ ？）これが最も重要な理由だと思います。

パフォーマンス面でのSVGがひどくなる可能性があることに注意してください。Chrome（2019年にこれを書いています！）のような最新のブラウザーでも、数百（実際には3〜800）のsvgアイコンがあるCMSのようなページは、レンダリングを完了するために文字通り5秒以上ブラウザーをハングさせます。その間にCPUを最大限に活用します。

他の場所で述べたように、ページに埋め込まれたSVGの数は、ブラウザーの負荷を指数関数的に増加させるため、このような状況に直面した場合

オプション＃1：svgをwebfontに変換します（パフォーマンスチャートはこちらをご覧ください：http：//frozeman.de/blog/2013/08/why-is-svg-so-slow/ ）

オプション＃2：プレーンな古いPNGにフォールバックする

オンザフライの色変更のような派手なことをしたくない、そしてSVGのインスタンスがたくさんあるような状況では、古いPNGがその仕事をして、その日を節約します！