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

Posted 2023-02-23

【中文标题】寻找研究：PNG Sprite vs SVG sprite vs Icon fonts

【英文标题】：Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts

【发布时间】：2014-02-13 17:49:53

【问题描述】：

我们目前在生产中使用 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 sizeSVG + Icon Fonts:Iconserving - SVG or Webfont?Ten reasons we switched from an icon font to SVG

【参考方案1】：

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

PNG 是光栅图像

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

SVG 是矢量 XML 文件

这意味着您需要：

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

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

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

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

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

[备注]

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

【讨论】：

补充...只是做了一些测试（没有完整的研究）：我测试了 svg 和 png 中的 23 个图标。 svg 非常简单且经过优化。 svg 的总文件大小比 png (64x64px) 大 160%。 png 的渲染速度更快（尤其是在移动设备上）。

我没有任何可量化的数字，但这个性能问题很可能是过早的优化。用于图标的 SVG 将小而简单，并且应该具有可以忽略不计的性能特征。同样用于解码 PNG。上面关于在应用启动时渲染 SVG 和使用光栅图像的最终建议确实是不必要的。

我不确定我是否同意那个 mlissner。 SVG 导致我的 Web 应用程序严重滞后，我需要找到一种更快的方式来显示图标。