寻找研究：PNG Sprite vs SVG sprite vs Icon字体 [英] Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts

问题描述

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

a。在Retina上渲染。

b。视听障碍用户放大。

c。创建图标时更简单的工作流程。

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

如果没有，你会比较它们的内容和方式？ （例如，我听说SVG需要更多CPU功率，我不知道如何测试它或后果是什么。）

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

BTW，这是我能找到的：

svgs很酷，但图标字体只占文件大小的10％

SVG +图标字体：

Iconserving - SVG或Webfont？

我们从图标字体切换到SVG的十大理由

解决方案

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

PNG是光栅图像

因此对于渲染它们只需要解压缩，这需要CPU功率，但现在这不是那么糟糕。

SVG是矢量XML文件

这意味着你需要：

1. 读取 XML 文本


2. 将其解码为某个支持矢量图的引擎/类


3. 渲染基于矢量图形的图像

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

许多人不同意这一点：'问题是没有一个100 ％兼容易于实现SVG库...至少我知道'但请记住我不使用框架或环境用于WEB，如JAVA或PHP ...此外，每个SVG库都有它自己的怪癖。如果您在不同的网络或图片查看者之间比较呈现的 SVG ，那么它就不一样了，并且到处都不支持许多功能。

你可以编写自己的 SVG 解码器，但它有点复杂。如果你只想要基本的功能，如路径和没有动画或渐变的形状，那么它相对容易做到，但是如果你想实现一切，你会花很多钱时间。

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

[注释]

如果您想将 SVG 用于图标我强烈建议您在App start上将它们渲染为栅格，然后使用光栅图像，如内存中的位图，以避免性能问题。

We are currently using PNGs in production for icons, but as a designer I'm trying to push for using SVG's for the benefit of:
a. Rendering on Retina.
b. Visually impaired users that zoom in.
c. An easier workflow when creating icons.

Are there any researches that compares the 3 methods? (PNG Sprite vs SVG sprite vs Icon fonts) in terms of performance?

If not, what and how would you compare them? (For example, I heard SVG requires more CPU power, and I have no idea how to test it or what are the consequences).

Thanks a lot! You are an amazing community.

BTW, this is what I could find:
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

解决方案

Not an answer but it will be not readable in comments

PNG's are raster images

So for render they just need to be decompressed which need CPU power but nowdays is this not so bad.

SVG's are vector XML files

Which means that you need to:

1. read XML text
2. decode it to some vector graphic capable engine/class
3. render vector graphics based image

Complicated SVG's (>300MB vector utf-8) have load/decode/render times even in minutes on fast machines (if decoded everything). If you decode just the basics you can do the same in seconds, but lost advanced features.

Many will not agree with this: 'problem is there is not a single 100% compatible easy to implement SVG library ... at least that I know of' but take in mind I do not use frameworks or environments for WEB like JAVA or PHP ... Also each SVG lib has it own quirks. If you compare rendered SVG between different web or image viewers then it is not the same and many features aren't supported everywhere.

You can code your own SVG decoder but it is bit complicated. If you want just basic functionality like path and shapes without animations or gradients then it is relatively easy to do, but if you want to implement everything you would spend a lot of time with that.

For a time I had a big problem finding good free SVG editor. The only one 'usable' I found was Inkspace but it is slow and a bit user unfriendly for my taste. On the other hand it can open almost every type of SVG I use in the right way...

[Notes]

If you want to use SVG's for icons I strongly recommend to render them to raster on App start and then use just raster images like bitmaps from memory to avoid performance problems.

这篇关于寻找研究：PNG Sprite vs SVG sprite vs Icon字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！