SVG图标与现代网站中的PNG图标
我想知道为什么这么less的现代网站仍然只使用PNG图标（但这个假设只是基于我的观察）。 到目前为止，我知道，使用PNG的SVG的主要原因是IE8和SVG使用更多的CPU功率（但我不认为这是简单的1K图标的任何问题）。 我可以看到（我们目前使用）使用SVG的许多优点，无论是用作精灵，图像还是内联SVG。
（问题寻找一个研究：PNG雪碧VS SVG雪碧VS图标字体侧重于性能，没有相关的答案， 图标字体与SVGcaching和networking关注焦点在networkingstream量，但它很容易通过模板解决。
如果新的网站仅支持现代浏览器，是否有任何理由不使用SVG（或者 – 是否有任何理由使用PNG的图标）？ 如果我们不关心IE8，并且通过模板化和/或caching来支持SVG的使用，那么是否有任何依赖于SVG的手段？
原因SVG可能是一个不错的select：
- 它无缝地支持任何大小的浏览器，尤其是使用CSS的
background-size - 你可以将它们向上/向下缩放，比如达到hover效果
- 您可以embeddedSVG并使用JavaScript和DOM对它们进行实时修改
- 你可以使用CSS来设置SVG和部分SVG（改变颜色，轮廓等）
- 您可以在客户端或服务器上dynamic生成SVG。 由于其基于文本的性质，您不需要低级库或强大的服务器来创build它们。
理由PNG可能是一个不错的select：
- 浏览器支持
- 现有的工具来创buildPNG spritesheets
- 大多数人在他们的电脑上都有一个PNG兼容的编辑器
- 您的graphics是照片或其他难以vector化图像
其他问题：
- 一些SVG编辑可能会在您的SVG中存储元数据，增加文件大小，并可能无意中暴露数据
- 例如，当您在Inkscape中导出PNG时，它会在保存时在SVG中保存该目录的绝对path
- SVG压缩机可能会删除这个，但我没有testing过（如果有的话，随意编辑）
SVG很酷（如何FakeRainBrig和很好地描述），并呈现精美，但可以非常复杂。 浏览器在处理vector数据而不是基于像素的图像时有更多的工作要做。 一个图像是一个元素，一个SVG可能有很多孩子，甚至可以添加到内联使用DOM时。
我没有做任何有价值的性能testing，但从逻辑的angular度来看，SVG应该在性能方面使用，尤其是在处理中年移动浏览器（CPU-stress）时。 有一个图表，你可以看到在不同的Android和IOS设备上的100个SVG图像相对于100个PNG图像消耗的CPU功率是非常有用的…
另一个与SVG的bug是，标签需要一些Android和三星的宽度和高度属性，无论浏览器和我们的旧IE浏览器。 而大多数现代SVG编辑器像A *** e Illustrator只是添加了“viewBox”属性。
关于SVG的最酷的事情是，它呈现任何像素密度的好和脆。
确实，png几乎在任何地方都被使用。 我认为这是因为在大多数情况下，SVG是非常无用的，图像应该更大（我认为），并且计算机必须在放大图像时重新生成图像（因为您总是放大图像，是不是？）我认为这是最重要的原因。
