web-dev-qa-db-ja.com

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

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

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

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

html5svgicons
79
Robert Goldwein

SVGが適している理由：

  • 特にcssのbackground-sizeを使用して、あらゆるサイズのブラウザをシームレスにサポートします
  • ホバー効果 などのように、それらを拡大/縮小できます
  • javaScriptとDOMを使用して、SVGを埋め込み、リアルタイムで変更できます。
  • cSSでSVGとSVGの一部をスタイルできます（色、アウトラインなどを変更）
  • クライアントまたはサーバーで動的にSVGを生成できます。テキストベースの性質のため、低レベルのライブラリや強力なサーバーを作成する必要はありません。

PNGが適している理由：

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

その他の懸念：

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

SVGはクールで（FakeRainBrigandの見事な表現）、美しくレンダリングされますが、かなり複雑になる可能性があります。ブラウザは、ピクセルベースの画像の代わりにベクターデータを処理するとき、より多くの作業が必要です。画像は1つの要素であり、SVGには多くの子があり、インラインで使用するとDOMに追加することさえできます。

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

SVGのもう1つのバグは、タグがAndroid/Samsungのブラウザと古き良きIEの幅と高さの属性を必要とすることです。そして、A *** e Illustratorのような最新のSVGエディターは、「viewBox」属性を追加するだけです。

SVGの最もクールな点は、あらゆるピクセル密度でニースと鮮明なレンダリングを行うことです。

10
corpirate

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

これは、ベクターグラフィックスを使用してUIを構築する人と言います。それは素晴らしいデザインツールですが、配信/帯域幅/リーチのためにPNGをトップにするのは難しいです。昨夜、有名なロゴを試しました。 CocaCola.svgはほぼ20Kでした。ソリッド/フラットカラーだったので、12色パレット圧縮を使用してPNG-8としてエクスポートし、1.6Kに下げました（!!!）いくつかのロゴについては大したことではありませんが、40を表示する必要がある場合それらの..まあ、あなたは写真を取得します。

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

最後に、両方に長所とユースケースがあると言わざるを得ませんが、PNGはより多くのトレイルを燃え上がらせており、現在のものを使用するときの抵抗は少なくなっています。 SVGがより適している奇妙なケースについては、この記事およびこの学習リソース

ハッピーデザイン！

6
Steven Garcia

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

2
barbaanto

performancewiseSVGは恐ろしいものになる可能性があることに注意しましょう。 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が仕事をして時間を節約します！

0
Joe7