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

时间:2014-06-26 14:49:28

标签: html5 svg icons

我想知道为什么这么少的现代网站仍然只使用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的问题?

6 个答案:

答案 0 :(得分:90)

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

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

原因PNG可能是一个不错的选择:

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

其他问题:

  • 某些SVG编辑器可能会在SVG中存储元数据,从而增加文件大小并可能无意中暴露数据
    • e.g。当您在Inkscape中导出PNG时,它保存了/保存时保存SVG中此目录的绝对路径
    • SVG压缩器可能会删除它,但我还没有对它进行测试(如果有的话可随意编辑)

答案 1 :(得分:10)

SVG很酷(FakeRainBrigand如何很好地描述)并且渲染得很漂亮,但可能非常复杂。 在处理矢量数据而不是基于像素的图像时,浏览器还有更多工作要做。图像是一个元素,SVG可能有许多子项,甚至可以在内联使用时添加到DOM中。

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

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

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

答案 2 :(得分:6)

除非您展示非常简单的形状/设计或者特别需要使用应用程序修改图形的某些部分,否则使用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

快乐设计!

答案 3 :(得分:2)

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

答案 4 :(得分:0)

请注意,性能方面 SVG可能会变得可怕。 即使在现代浏览器上,例如Chrome(写于2019年!),类似CMS的页面也带有几百个(实际上是3-800个)svg图标,实际上会将浏览器挂起5秒钟以上才能完成渲染。同时最大化CPU。

如其他地方所述,指数页面中嵌入的SVG数量增加了浏览器的负载,因此,如果您碰巧遇到这种情况

选项1:将svgs转换为webfont(请参见此处的性能图表:http://frozeman.de/blog/2013/08/why-is-svg-so-slow/

选项2:回退到普通的旧PNG

在这样的情况下,您甚至不想做任何事上喜欢的即时颜色修改,并且您有很多SVG实例,那么旧的PNG可以完成工作并节省时间!

答案 5 :(得分:0)

好吧,由于这是一个老问题,我将升级在现代浏览器中的事实;移动或桌面,在现代设备中;手机或电脑,svg 是最好的选择,当你不处理真实​​照片时,我选择 .webp。通过对除照片以外的所有图像使用优化的 svgs,最后使用 webp,我已经将应用程序的大小减少了许多兆字节。

当然,现在是 2021 年,设备和浏览器在性能和支持方面要好得多。因此,现在使用 svgs 或 svg 图标字体更方便。