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

Question

我们目前在生产中使用PNG作为图标，但作为一名设计师，我正在努力推动使用SVG，以获得以下好处：

a.在Retina上渲染。

b.放大的视障用户。

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的能力，但现在这并不是那么糟糕。

XML是矢量文件

这意味着您需要：

1. read XML text
2. 将其解码为具有矢量图形功能的基于矢量图形的图像

复杂的SVG (>300MB矢量utf-8)在速度很快的机器上的加载/解码/渲染时间甚至可以在几分钟内完成(如果你只解码所有的东西)。如果你只解码基本的东西，你可以在几秒钟内做同样的事情，但会失去高级功能。

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

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

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

笔记

如果你想使用SVG的图标，我强烈建议在App start上把它们渲染成栅格，然后只使用像内存中的位图这样的栅格图像，以避免性能问题。