Performance 寻找研究：PNG精灵vs SVG精灵vs图标字体

我们目前正在生产中使用PNG作为图标，但作为一名设计师，我正努力推动使用SVG的好处：
A.在视网膜上呈现。
B放大的视障用户。
C创建图标时更容易的工作流

是否有研究对这三种方法进行了比较？（PNG精灵vs SVG精灵vs图标字体）在性能方面

如果没有，您将如何比较它们？（例如，我听说SVG需要更多的CPU电源，我不知道如何测试它，也不知道结果如何）

非常感谢！你们是一个了不起的社区

顺便说一句，这就是我能找到的：

---

不是答案，但在评论中不可读

PNG是光栅图像

所以，对于渲染，它们只需要解压缩，这需要CPU的能力，但现在这并不是那么糟糕

SVG是矢量XML文件

这意味着您需要：

阅读XML文本

将其解码为支持矢量图形的引擎/类

基于图像的矢量图形渲染

复杂的SVG（>300MB矢量utf-8）在高速机器上的加载/解码/渲染时间甚至以分钟为单位（如果所有内容都已解码）。如果只解码基本功能，您可以在几秒钟内完成同样的操作，但会丢失高级功能

许多人不会同意这一点：“问题是没有一个100%兼容的易于实现的SVG库。。。至少我知道“但请记住，我不使用JAVA或PHP等WEB框架或环境…”。。。此外，每个SVG库都有自己的怪癖。如果您在不同的web或图像查看器之间比较呈现的SVG，那么它就不一样了，而且很多功能在任何地方都不受支持

您可以编写自己的SVG解码器，但它有点复杂。如果您只需要基本功能，如

路径

和没有动画或渐变的形状，则相对容易实现，但如果您想实现所有功能，则需要花费大量时间

有一段时间，我在寻找好的免费SVG编辑器时遇到了一个大问题。我发现唯一一个“可用”的是Inkspace，但它速度慢，对我的口味来说有点不友好。另一方面，它可以以正确的方式打开我使用的几乎所有类型的SVG

[Notes]

---

如果您想使用SVG作为图标，我强烈建议您在应用程序启动时将其渲染为光栅，然后仅使用内存中的位图等光栅图像，以避免性能问题。

要添加到这一点。。。只是做了一些测试（没有完整的研究）：我测试了svg和png中的23个图标。svg非常简单且经过优化。svg的总文件大小比png（64x64px）大约160%。png的渲染速度要快得多（尤其是在移动设备上）。我没有任何可量化的数字，但这个性能问题很可能是过早的优化。用于图标的SVG将小而简单，并且应该具有可忽略的性能特征。PNG解码同上。上面关于在app start上渲染SVG和使用光栅图像的最后建议真的没有必要。我不确定我是否同意mlissner。SVG在我的web应用程序上造成了严重的延迟，我需要找到一种更快的方式来显示图标。