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

Posted 2023-03-28

【中文标题】现代网站中的 SVG 图标与 PNG 图标

【英文标题】：SVG icons vs. PNG icons in modern web sites

【发布时间】：2014-08-17 11:46:12

【问题描述】：

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

（问题Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts关注性能，没有相关答案，Icon Font vs. SVG caching and network concern关注网络流量，但很容易通过例如模板解决。）

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

【问题讨论】：

亲爱的投票者，请让我知道基于这个问题的具体意见是什么，我在哪里要求 具体 - 技术 - 原因？非常感谢您的反馈，这样我可以改进我的进一步问题。

罗伯特，这似乎不是基于意见的，但人们有时会进入僵尸模式，只是略过问题而不实际阅读它们。

我更喜欢 png 的简单性和更干净的 DOM。要添加到以下答案的一点是，使用 svg，您可以动态更改颜色。如果一个图标有三种颜色：常规、活动和悬停，那就是 3 个 png 图片，但只有一个 svg。

@Robert [ZOMBIE MODE] 是个好人 :) :D

【参考方案1】：

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

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

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

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

其他问题：

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

【讨论】：

谢谢，我们的图形人员在 Illustrator 中创建 SVG，然后手动编辑它们，所以它通常

是的，有些人从第三方获取他们的 SVG，并且不要在文本编辑器中打开它们，或者确保它们被压缩。只是不想把它排除在外。我现在想到的 PNG 也有同样的问题。通常无用的数据（在网络环境中）存储在其中。此数据由编辑器、文件浏览器和其他程序使用。不过，这在 jpeg 中更为常见（相机商店品牌、型号、镜头、设置等）。

谢谢，所以我想在我们的项目中使用 SVG 确实没有任何缺点，我们会更深入地集成它们。感谢您的见解。

矢量图标的正确方式是图标字体。对我来说，SVG 图标的最大缺点是 CSS 中的 data 属性不适用于 IE10/11。

@Gerfried Icon 字体有很多可访问性问题。一旦用户决定阻止 Web 字体或用自己的字体覆盖所有字体（无论出于何种原因），所有这些漂亮的图标都会立即损坏。有后备方案，但我自己还没有看到 100% 可行的解决方案。 SVG 图像并非如此。

【参考方案2】：

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

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

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

最后，我不得不说两者都有优势和用例，但 PNG 已经开辟了更多的道路，当你顺应潮流时，你面临的阻力更少。对于那些 SVG 确实更适合的奇怪情况，我强烈推荐 this article 和 this learning resource

设计愉快！

【讨论】：

IMO，这是最好的答案。

您应该指定您使用的可口可乐徽标。 2007 年的当前徽标非常简单，大约是 8KB。与 PNG-8 相比，它仍然微不足道，但比 20KB 好得多。

起初我以为这个答案已经过时了，但后来我看到了 2018 年。我还用“知名”可口可乐标志进行了测试，并将实际结果放在这里 codepen.io/JHeth/pen/XWeWZpO 除非你是在您的网站上显示大量微小的缩略图或者您需要光栅图形（照片）然后使用 SVG 更有意义，并且在 2018 年也是如此。至于以性能和兼容性问题而闻名......也许this chart 在 2018 年有更多的红色但不多，而且我从未听说有人提到正确制作的 SVG 图像的性能问题。

【参考方案3】：

SVG 很酷（FakeRainBrigand 很好地描述了这一点）并且渲染精美，但可能非常复杂。 在处理矢量数据而不是基于像素的图像时，浏览器需要做更多的工作。图片是一个元素，SVG 可能有很多子元素，内联使用时甚至可以添加到 DOM 中。

我没有进行任何有价值的性能测试，但从逻辑的角度来看，SVG 在性能方面应该谨慎使用，尤其是在处理中年移动浏览器时（CPU 压力）。 如果有一个图表，您可以在不同的 android 和 ios 设备上查看 100 个 SVG 图像与 100 个 PNG 图像消耗的 CPU 功率，这将非常有用......

SVG 的另一个问题是，对于某些 Android/Samsung 浏览器和我们的旧版 IE，标签需要一个宽度和高度属性。而大多数现代 SVG 编辑器（如 A***e Illustrator）只需添加“viewBox”属性。

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

【参考方案4】：

让我们注意性能方面 SVG 可能会变得很糟糕。 即使在现代浏览器上，比如 Chrome（在 2019 年写这篇文章！），一个带有几百个（实际上是 3-800 个）svg 图标的类似 CMS 的页面实际上会让浏览器挂起 5 秒以上才能完成渲染。同时最大化 CPU。

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

选项 #1：将 svgs 转换为 webfont（在此处查看性能图表：http://frozeman.de/blog/2013/08/why-is-svg-so-slow/）

选项 #2：回退到普通的旧 PNG

在这种情况下，您~不想做任何花哨的事情，比如即时颜色修改，并且您有许多 SVG 实例，旧的 PNG 可以完成这项工作并节省时间！

【讨论】：

我不这么认为，SVG 的性能更好。建议阅读：vecta.io/blog/comparing-svg-and-png-file-sizes

SVG 确实可以减少带宽，但它需要通过 CPU 进行计算！所以 Joe7 是真的，SVG 可以消耗这么多的 CPU 使用来处理它，但是在下载图像的情况下，是的，SVG 图像的尺寸肯定较小。

【参考方案5】：

是的，png 几乎无处不在。 我认为这是因为 SVG 在大多数情况下是非常没用的，图像应该更大（我认为）并且计算机必须在您缩放它时重新生成图像（因为您总是缩放图像，不是吗？ ?) 我认为这是最重要的原因。

【讨论】：

SVG 对图标非常有用，这些图标在现代（移动）网站中无处不在。它们提供缩放和 css 样式，没有质量损失，这是 png 不存在的两个重要功能。

从用户的角度来看，这是没有意义的，但作为多媒体开发人员，最好只使用一个文件，可以在任何屏幕上使用，并且始终保持相同的质量。

【参考方案6】：

好吧，由于这是一个老问题，我将升级现代浏览器中的事实；现代设备中的移动设备或桌面设备；手机或个人电脑，当您不处理真实​​照片时，svg 是最佳选择，那么我选择 .webp。通过仅对除照片以外的所有图像使用优化的 svg，最后使用 webp，我已将应用程序的大小减少了数兆字节。

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

【参考方案7】：

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