SVG图标与现代网站中的PNG图标

Posted 2021-04-09

我想知道为什么这么少的现代网站仍然只使用PNG图标（但这个假设只是基于我的观察）。到目前为止，我知道，使用PNG而不是SVG的主要原因是IE8和SVG使用更多的CPU功率（但我不认为这对于简单的1K图标来说是个问题）。我可以看到（我们目前使用）使用SVG的许多优点，无论是作为精灵使用，还是作为图像使用，还是作为内联SVG使用。

（问题Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts侧重于性能而没有相关的答案，Icon Font vs. SVG caching and network concern专注于网络流量，但它很容易通过例如模板解决。）

如果新网站仅支持现代浏览器，是否有任何理由不使用SVG（或者 - 是否有任何理由将PNG用于图标）？如果我们不关心IE8并且通过模板和/或缓存来支持SVG的使用，那么是否有任何依赖SVG的问题？

答案

原因SVG可能是个不错的选择：

• 它无缝支持任何大小的浏览器，尤其是css的background-size
• 你可以向上/向下缩放它们，例如到hover effect
• 您可以嵌入SVG并使用javascript和DOM对它们进行实时修改
• 你可以用CSS设置SVG和部分SVG的样式（改变颜色，轮廓等）
• 您可以在客户端或服务器上动态生成SVG。由于它们基于文本的特性，您不需要低级库或强大的服务器来创建它们。

PNG可能是个不错的选择：

• 浏览器支持
• 用于创建PNG spritesheets的现有工具
• 大多数人在他们的计算机上有一个PNG兼容的编辑器
• 您的图形是照片或其他难以矢量化的图像

其他问题：

• 某些SVG编辑器可能会在SVG中存储元数据，从而增加文件大小并可能无意中暴露数据 例如当您在Inkscape中导出PNG时，它保存了/确实保存了SVG中此目录的绝对路径 SVG压缩器可能会删除它，但我还没有测试过（如果你有，可以随意编辑）

另一答案

SVG很酷（FakeRainBrigand如何很好地描述）并呈现精美，但可能相当复杂。在处理矢量数据而不是基于像素的图像时，浏览器还有更多工作要做。图像是一个元素，SVG可能有许多子项，甚至可以在内联使用时添加到DOM中。

我没有做任何有价值的性能测试，但从逻辑的角度来看，SVG应该在性能方面小心使用，特别是在处理中年移动浏览器时（CPU压力）。有一个图表可以看到100个SVG图像消耗的CPU功率与不同android和ios设备上的100个PNG图像相比非常有用...

SVG的另一个缺点是标签需要一些Android /三星的宽度和高度属性，无论什么浏览器和我们的老IE。而像A *** e Illustrator这样的大多数现代SVG编辑器只添加了“viewBox”属性。

关于SVG最酷的事情是它在任何像素密度下都呈现出漂亮和清晰。

另一答案

除非您展示非常简单的形状/设计或者特别需要使用应用程序修改图形的某些部分，否则使用SVG的动机并不大。您可以生成两倍于原始大小的PNG（用于视网膜显示），并且文件大小仍然要小一些 - 更不用说传统浏览器的覆盖范围更广（不需要javascript或polyfill）。

我说这是用矢量图形构建UI的人。这是一个很棒的设计工具，但是对于交付/带宽/覆盖范围来说，很难获得顶级PNG。就在昨晚，我测试了一个众所周知的标志。 CocaCola.svg差不多20K。由于它是一种实心/平面颜色，我输出为PNG-8，带有12色调色板压缩，并将其降至1.6K（!!!）只需几个标志就没什么大不了的，但是当你需要显示40个他们......好吧，你得到了照片。

最好的部分是您可以将PNG转换为base64数据uri并将它们嵌入样式表中。 SVG不推荐这样做 - 这种格式因性能和兼容性问题而闻名，特别是在移动浏览器上。

最后，我不得不说两者都有优势和用例，但是PNG已经开辟了更多的优势，当你顺应潮流时，你会遇到更少的阻力。对于SVG确实更合适的奇怪情况，我强烈推荐this article和this learning resource

快乐的设计！

另一答案

这是真的，png几乎用于所有地方。我认为这是因为在大多数情况下，SVG非常无用，图像应该更大（我认为），并且计算机必须在每次缩放时重新生成图像（因为你总是放大图像，不是吗？ ？）我认为这是最重要的原因。