寻找研究：PNG Sprite vs SVG sprite vs Icon fonts

Question

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

有没有比较这三种方法的研究？ （PNG Sprite vs SVG sprite vs Icon 字体）在性能方面？

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

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

顺便说一句，这是我能找到的：
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

不是答案，但在 cmets 中不可读

PNG 是光栅图像

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

SVG 是矢量 XML 文件

这意味着您需要：

1. 读取XML文本
2. 将其解码为一些支持矢量图形的引擎/类
3. 渲染基于矢量图形的图像

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

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

您可以编写自己的 SVG 解码器，但这有点复杂。如果您只想要path 之类的基本功能和没有动画或渐变的形状，那么它相对容易实现，但如果您想要实现所有功能，您将花费大量时间。

有一段时间我很难找到好的免费 SVG 编辑器。我发现唯一一个“可用”的是 Inkspace，但它很慢，而且对我的口味有点用户不友好。另一方面，它可以打开我以正确方式使用的几乎所有类型的 SVG...

[备注]

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