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

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

(问题 寻找一个研究: PNG 精灵 vs SVG 精灵 vs 图标字体侧重于性能而没有相关的答案，问题 图标字体与 SVG 缓存和网络问题侧重于网络流量，但它很容易通过例如模板来解决。)

If new web site supports only modern browsers, is there any reason for not using SVGs (or - is there any reason for using PNGs for icons)? If we don't care about IE8 and the use of SVG is backed up by templating and/or caching, is there any catch to rely only on SVGs?

89419 次浏览
小开

的确，png 几乎在任何地方都被使用。 我认为这是因为 SVG 在大多数情况下是没有用的，图像应该更大(我认为) ，并且当你放大图像时，计算机必须重新生成图像(因为你总是放大图像，不是吗 我认为这是最重要的原因。

小开
最佳答案

Reasons SVG may be a good choice:

  • 它无缝地支持任何大小的浏览器，特别是 CSS 的 background-size
  • you can scale them up/down will, such as to to a 盘旋效应
  • 您可以嵌入 SVG 并使用 JavaScript 和 DOM 对其进行实时修改
  • 您可以使用 CSS (更改颜色、轮廓等)对 SVG 和部分 SVG 进行样式化
  • 您可以在客户机或服务器上动态生成 SVG。由于它们基于文本的特性，您不需要低级库或强大的服务器来创建它们。

Reasons PNG may be a good choice:

  • browser support
  • 用于创建 PNG 电子表格的现有工具
  • 大多数人的电脑上都有一个 PNG 兼容的编辑器
  • your graphics are photos or other difficult to vectorize images

其他关注:

  • 一些 SVG 编辑器可能会在您的 SVG 中存储元数据，从而增加文件大小，并可能无意中暴露数据
    • 例如，当你在 Inkscape 导出一个巴布亚新几内亚国家图书馆时，当你保存的时候，它确实在 SVG 中保存了到这个目录的绝对路径
    • SVG 压缩器可能会删除这一点，但我还没有测试过(如果您有编辑请随意)
小开

SVG 很酷(如 FakeRainBrigand 所描述的那样) ，并且呈现得很漂亮，但也可能非常复杂。 当处理矢量数据而不是基于像素的图像时，浏览器有更多的工作要做。图像是一个元素，SVG 可能有许多子元素，在内联使用时甚至可以将它们添加到 DOM 中。

我没有做任何有价值的性能测试，但从逻辑的角度来看，SVG 应该在性能方面谨慎使用，特别是在处理中年移动浏览器(CPU 压力)时。 如果有一个图表，您可以看到在不同的 Android 和 IOS 设备上100个 SVG 映像和100个 PNG 映像所消耗的 CPU 能量，那将非常有用。

SVG 的另一个问题是，对于 Android/Samsung 的浏览器和我们的老 IE，Tag 需要宽度和高度属性。大多数现代的 SVG 编辑器，比如 A * * e Illustrator，只是添加了“ viewBox”属性。

SVG 最酷的地方在于它在任何像素密度下都能呈现漂亮而清晰的效果。

小开

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

我是作为一个用矢量图形构建 UI 的人来说这个问题的。这是一个非常棒的设计工具，但是在传输/带宽/覆盖范围方面很难超过 PNG。就在昨晚，我测试了一个著名的标志。可口可乐 svg 差不多两万。由于它是一个纯色/平色，我导出为 PNG-8与12色调色板压缩，并得到它下降到1.6 K (! !)对于一些商标来说，这不是什么大问题，但是当你需要展示40个商标的时候。.你懂的。

最好的部分是您可以将 PNG 转换为 base64数据 uri 并将它们嵌入到您的样式表中。SVG 不推荐使用这种格式——这种格式在性能和兼容性方面已经很出名了，特别是在移动浏览器上。

最后，我不得不说两者都有优势和用例，但是 PNG 已经开辟了更多的道路，并且当您使用当前技术时面临的阻力更小。对于那些 SVG 确实更适合的奇怪情况，我强烈推荐 译自: 美国《科学》杂志网站(http://kristerkari.github.io/entures-in-webkit-land/blog/2013/03/08/deal-with-svg-images-in-mobile-chrome/”rel = “ norefrer”)和 this learning resource

Happy Designing!

小开

让我们注意 表现良好 SVG 可能变得很糟糕。 即使是在现代浏览器上，比如 Chrome (写于2019年!)一个类似 CMS 的页面上有几个100(实际上是3-800个)的 svg 图标，可以将浏览器挂起5秒多来完成渲染。同时最大化 CPU。

正如在其他地方提到的，嵌入在页面 成倍增长中的 SVG 的数量增加了浏览器的负载，所以如果您碰巧遇到这种情况

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

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

在这种情况下，你永远不会想做任何花哨的事情，比如动态颜色修改，你有许多 SVG 的实例，旧的 PNG 做的工作，挽救了一天！

小开

既然这是个老问题，那么我就升级一下这个事实: 在现代浏览器、移动设备或桌面设备、现代设备、手机或个人电脑中，当你不处理真实照片时，svg 是最好的选择，那么我选择。Webp.我已经减少了许多兆字节的应用程序的大小，只是使用优化的 svgs 的所有图像，但照片，并使用 webp 的最后。

当然，现在是2021年，设备和浏览器在性能和支持方面要好得多。因此，现在使用 svgs 更加方便，最近使用许多图标字体提供的 svg 图标甚至比使用字体本身更好，因为你可能加载和处理一个完整的字体，而你只使用10到20个图标。

小开

SVG 图标明显比 PNG 图标更受欢迎。为什么会这样？主要原因是它们更容易创建，并且可以被大多数 Web 浏览器处理。缺点是 SVG 图标的质量不如 PNG 图标。它们也不支持 CSS 3D 转换，并且在一些应用程序中会引起问题，比如当与按钮一起使用时。现代浏览器现在支持 免费的 SVG 图标，它可以很容易地保存在服务器上并加载到客户端代码中。


提交答案