performance - 寻找研究 : PNG Sprite vs SVG sprite vs Icon fonts

Question

我们目前在生产中使用 PNG 来制作图标，但作为一名设计师，我正试图插入使用 SVG 来获得以下好处:
一种。在视网膜上渲染。
湾放大的视障用户。
C。创建图标时更简单的工作流程。

有没有比较这三种方法的研究？ (PNG Sprite vs SVG sprite vs Icon fonts)在性能方面？

如果不是，您将如何比较它们以及如何比较它们？ (例如，我听说 SVG 需要更多的 CPU 能力，我不知道如何测试它或会产生什么后果)。

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

顺便说一句，这是我能找到的:
svgs are cool, but icon fonts are just 10% of their file size
SVG + Icon Fonts:
Iconserving - SVG or Webfont?
Ten reasons we switched from an icon font to SVG

Answer 1

不是答案，但在评论中将无法阅读

PNG 是光栅图像

因此，对于渲染，它们只需要解压缩，这需要 CPU 功率，但现在这还不错。

SVG 是矢量 XML 文件

这意味着您需要:

阅读 XML 正文

将其解码为具有矢量图形功能的引擎/类

渲染基于矢量图形的图像

复杂 SVG 的(> 300MB 矢量utf-8)即使在快速机器上的几分钟内也有加载/解码/渲染时间(如果解码所有内容)。如果您只解码基础知识，您可以在几秒钟内完成相同的工作，但会丢失高级功能。

许多人不会同意这一点:“问题是没有一个 100% 兼容的易于实现的 SVG 库......至少我知道”但请记住，我不使用 WEB 框架或环境，如 JAVA 或 PHP ...每个 SVG 库也有它自己的怪癖。如果比较渲染 SVG 在不同的 Web 或图像查看器之间，它是不一样的，并且许多功能并非无处不在。

您可以自己编写代码 SVG 解码器，但有点复杂。如果您只需要基本功能，例如 path和没有动画或渐变的形状，那么它相对容易做到，但是如果您想实现所有功能，您会 花很多时间接着就，随即。

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

【备注】

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