我想知道为什么这么少的现代网站仍然只使用PNG图标(但这个假设只是基于我的观察).到目前为止,我知道,使用PNG而不是SVG的主要原因是IE8和SVG使用更多的CPU功率(但我不认为这对于简单的1K图标来说是个问题).我可以看到(我们目前使用)使用SVG的许多优点,无论是作为精灵使用,还是作为图像使用,还是作为内联SVG使用.
(问题寻找研究:PNG Sprite vs SVG sprite vs Icon字体侧重于性能而没有相关答案,Icon Font与SVG缓存和网络关注的重点是网络流量,但它很容易通过模板解决.)
如果新网站仅支持现代浏览器,是否有任何理由不使用SVG(或者 - 是否有任何理由将PNG用于图标)?如果我们不关心IE8并且通过模板和/或缓存来支持SVG的使用,那么是否有任何依赖SVG的问题?
原因SVG可能是个不错的选择:
它无缝支持任何大小的浏览器,尤其是css的浏览器 background-size
您可以向上/向下缩放它们,例如悬停效果
您可以嵌入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确实更适合的奇怪案例,我强烈推荐这篇文章和这个学习资源
快乐的设计!