web-dev-qa-db-ja.com

調査を探す：PNGスプライトvs SVGスプライトvsアイコンフォント

現在、アイコン用にPNGを使用していますが、デザイナーとして、SVGを使用するためにプッシュしようとしています。
a。 Retinaでのレンダリング。
b。ズームインする視覚障害者のユーザー。
c。アイコン作成時のより簡単なワークフロー。

3つの方法を比較する研究はありますか？ （PNGスプライトvs SVGスプライトvsアイコンフォント）パフォーマンスの点で？

そうでない場合、何をどのように比較しますか？ （たとえば、SVGにはより多くのCPUパワーが必要だと聞いたのですが、どのようにテストするか、またはその結果はわかりません）。

どうもありがとう！あなたは素晴らしいコミュニティです。

ところで、これは私が見つけることができたものです：
svgはクールですが、アイコンフォントはファイルサイズの10％にすぎません
SVG +アイコンフォント：
Iconserving-SVGまたはWebfont？
アイコンフォントからSVGに切り替えた10の理由

performancesvgiconspngperformance-testing
24
Nir Benita

回答ではありませんが、コメントでは判読できません

PNGはラスターイメージです

そのため、レンダリングには、CPUパワーを必要とする圧縮解除が必要ですが、今日はそれほど悪くありません。

SVGはベクターXMLファイルです

つまり、次のことを行う必要があります。

  1. 読み取り[〜＃〜] xml [〜＃〜]テキスト
  2. それをいくつかのベクターグラフィック対応エンジン/クラスにデコードする
  3. ベクターグラフィックスベースのイメージをレンダリングする

複雑な[〜＃〜] svg [〜＃〜] 's（> 300MB vector utf-8）は、高速マシンで（すべてをデコードした場合）数分でさえロード/デコード/レンダリング時間を持っています。基本だけをデコードすると、数秒で同じことができますが、高度な機能が失われます。

多くの人はこれに同意しません：「問題は、SVGライブラリを実装するための単一の100％互換性のある簡単なものではない...少なくとも私が知っていること」ですが、JavaまたはPHP ...また、各SVGライブラリには独自の癖があります。レンダリングを比較すると[〜＃〜] svg [〜＃〜]異なるWebまたは画像ビューア間では、同じではなく、多くの機能がすべての場所でサポートされているわけではありません。

独自の[〜＃〜] svg [〜＃〜]デコーダーをコーディングできますが、少し複雑です。 pathのような基本的な機能と、アニメーションやグラデーションのない形状だけが必要な場合は比較的簡単ですが、すべてを実装する場合は多くの時間を費やすを使用します。

しばらくの間、私は無料の良い[〜＃〜] svg [〜＃〜]エディタを見つけるのに大きな問題を抱えていました。私が見つけた唯一の「使用可能な」ものはInkspaceでしたが、それは遅く、私の好みには少しユーザーフレンドリーではありません。一方、それはほぼすべてのタイプの[〜＃〜] svg [〜＃〜]を開くことができます私は正しい方法で使用します...

[メモ]

アイコンに[〜＃〜] svg [〜＃〜]を使用したい場合は、アプリの起動時にそれらをラスターにレンダリングし、ビットマップなどのラスターイメージだけを使用してメモリから回避することを強くお勧めしますパフォーマンスの問題。

12
Spektre