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

Question

我想知道为什么很少有现代网站仍然只使用 PNG 作为图标（但这个假设只是基于我的观察）。到目前为止我知道，在 SVG 上使用 PNG 的主要原因是 IE8 和 SVG 使用更多的 CPU 能力（但我认为这对于简单的 1K 图标来说不是任何问题）。我可以看到（并且我们目前正在使用）使用 SVG 的许多优势，无论是用作 sprite、图像还是内联 SVG。

（ 寻找研究的问题：PNG Sprite vs SVG sprite vs Icon fonts 侧重于性能并且没有相关答案， Icon Font vs. SVG 缓存和网络关注 侧重于网络流量，但它很容易通过例如模板解决。）

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

原文由 Robert Goldwein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

其他问题：

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

原文由 Brigand 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

除非您展示的是非常简单的形状/设计，或者特别需要使用应用程序修改部分图形，否则使用 SVG 的动机并不多。您可以生成原始大小两倍的 PNG（对于视网膜显示器），并且文件大小仍然小一个数量级——更不用说对旧版浏览器的更好覆盖（不需要 javascript 或 polyfill）。

我说这是作为使用矢量图形构建 UI 的人。这是一个很棒的设计工具，但在交付/带宽/覆盖范围方面很难超越 PNG。就在昨晚，我测试了一个众所周知的标志。 CocaCola.svg 差不多有 20K。因为它是纯色/纯色，所以我将其导出为 PNG-8 并进行了 12 色调色板压缩，并将其降低到 1.6K（！！！）对于几个徽标来说，这没什么大不了的，但是当您必须显示 40 个时他们中的.. 好吧，你明白了。

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

最后，我不得不说两者都有优势和用例，但 PNG 开辟了更多的道路，当你顺应潮流时，你面临的阻力更少。对于那些 SVG 确实更适合的奇怪情况，我强烈推荐 这篇文章 和 这个学习资源

快乐设计！

原文由 Steven Garcia 发布，翻译遵循 CC BY-SA 3.0 许可协议