我想知道为什么这么少的现代网站仍然只使用PNG作为图标（但是这种假设只是基于我的观察）。到目前为止，我知道，在SVG上使用PNG的主要原因是IE8，并且SVG使用了更多的CPU能力（但是我不认为对于简单的1K图标来说这不是问题）。我可以看到（现在我们正在使用）使用SVG的许多优点，无论是将其用作精灵，图像还是嵌入式SVG。
（寻找研究的问题：PNG Sprite与SVG sprite与Icon字体专注于性能，而没有相关的答案，Icon Font与SVG缓存和网络相关性关注于网络流量，但是可以通过模板轻松解决。）
如果新网站仅支持现代浏览器，是否有任何理由不使用SVG（或-是否有任何理由将PNG用于图标）？如果我们不在乎IE8，并且通过模板化和/或缓存来备份SVG的使用，是否有任何陷阱可以仅依靠SVG？
Answers:
SVG可能是一个不错的选择的原因：
background-sizePNG可能是一个不错的选择的原因：
其他问题：
SVG很酷（FakeRainBrigand很好地描述了它）并且呈现精美，但是可能非常复杂。当处理矢量数据而不是基于像素的图像时，浏览器有更多工作要做。图像是一个元素，SVG可能有很多子级，当内联使用时，它们甚至可以添加到DOM中。
我没有进行任何有价值的性能测试，但是从逻辑的角度来看，在性能方面，尤其是在处理中年移动浏览器（CPU压力）时，应谨慎使用SVG。拥有一张图表，在不同的Android和IOS设备上可以看到100张SVG图像与100张PNG图像所消耗的CPU电源，这将非常有用...
SVG的另一个令人烦恼的事情是，对于某些Android / Samsung，无论浏览器还是我们的旧版IE，标记都需要一个width和height属性。而且大多数现代SVG编辑器（例如A *** e Illustrator）都只添加了“ viewBox”属性。
关于SVG的最酷的事情是，它在任何像素密度下都呈现出清晰美观的效果。
除非您显示非常简单的形状/设计，或者特别需要使用该应用程序修改图形的某些部分，否则使用SVG不会有很多诱因。您可以生成两倍于原始大小的PNG（用于视网膜显示器），而文件大小仍要小一个数量级-更不用说对传统浏览器的更好覆盖了（不需要javascript或polyfill）。
我说这是用矢量图形构建UI的人。这是一个了不起的设计工具，但是对于传递/带宽/覆盖范围而言，很难超越PNG。就在昨晚，我测试了一个著名的徽标。CocaCola.svg接近2万。由于它是纯色/单色，我导出为具有12色调色板压缩的PNG-8，并将其降低到1.6K（!!!）对于几个徽标来说，这没什么大不了的，但是当您必须显示40他们..好吧，你知道了。
最好的部分是，您可以将PNG转换为base64数据uri，并将其直接嵌入样式表中。SVG不建议使用此格式。SVG是一种已因性能和兼容性问题而闻名的格式，尤其是在移动浏览器上。
最后，我必须说两者都有优点和用例，但是PNG取得了很多成就，当您采用最新版本时，您所面临的阻力也较小。对于那些SVG确实更适合的奇怪情况，我强烈推荐这篇文章，本学习资源
设计愉快！
的确，几乎所有地方都使用png。我认为这是因为在大多数情况下，SVG几乎没有用，图像应该更大（我认为），并且每当缩放图像时计算机都必须重新生成图像（因为您总是缩放图像，不是吗？ ？）我认为这是最重要的原因。
让我们注意，性能上的SVG可能变得可怕。即使在现代浏览器上，例如Chrome（写于2019年！），类似CMS的页面也带有几百个svg图标（实际上是3-800个）svg图标，实际上会使浏览器挂起5秒以上才能完成渲染。同时最大化CPU。
如其他地方所述，页面中嵌入的SVG的数量呈指数增加，从而增加了浏览器的负载，因此，如果您碰到这种情况
选项1：将svgs转换为webfont（请参见此处的性能图表：http：//frozeman.de/blog/2013/08/why-is-svg-so-slow/ ）
选项2：退回到普通的旧PNG
在这样的情况下，您〜根本不想做任何事想做的事，例如即时颜色修改，并且有很多SVG实例，那么旧的PNG可以完成工作并节省时间！