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

SVG icons vs. PNG icons in modern web sites

提问by Robert Goldwein

I'm wondering why so few modern web sites still use only PNGs for icons (but this assumption is just based my observation). So far I know, main reasons for using PNGs over SVGs are IE8 and that SVG uses more CPU power (but I don't believe this is any issue for simple 1K icons). I can see (and we currently use) many advantages in using SVGs, either when it's used as sprites, as images, or as inline SVG.

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

(Question Looking for a research: PNG Sprite vs SVG sprite vs Icon fontsfocuses on performance and doesn't have relevant answer, Icon Font vs. SVG caching and network concernfocuses on network traffic, but it's easily solvable by e.g. templating.)

（正在寻找研究的问题：PNG Sprite vs SVG sprite vs Icon fonts侧重于性能，没有相关答案，Icon Font vs. SVG caching 和网络关注侧重于网络流量，但可以通过例如模板轻松解决。）

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?

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

回答by Brigand

Reasons SVG may be a good choice:

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

• it seamlessly supports browsers of any size, especially with css's background-size
• you can scale them up/down will, such as to to a hover effect
• you can embed SVGs and do real-time modifications to them with JavaScript and the DOM
• you can style SVGs and parts of SVGs with CSS (changing colors, outlines, etc.)
• you can generate SVGs dynamically, either on the client or server. Due to their text based nature, you don't need low-level libraries or powerful servers to create them.

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

Reasons PNG may be a good choice:

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

• browser support
• existing tooling for creating PNG spritesheets
• most people have a PNG compatible editor on their computer
• your graphics are photos or other difficult to vectorize images

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

Other concerns:

其他问题：

• some SVG editors may store metadata in your SVGs, increasing file size and possibly unintentionally exposing data
  • e.g. when you export a PNG in Inkscape it did/does save the absolute path to this directory in the SVG when you save
  • SVG compressors may remove this, but I haven't tested it (feel free to edit if you have)

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

回答by corpirate

SVG is cool (how FakeRainBrigand nicely described) and renders beautifully but can be pretty complex. A browser has more work to do when dealing with vector data instead of pixel based images. An image is one element, a SVG may have lots of children that can even be added to the DOM when used inline.

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

I did not do any valuable performance tests but from a logical point of view SVG should be used carefully when it comes to performance especially when dealing with middle aged mobile browsers (CPU-stress). Would be very useful to have a chart where you can see the CPU power consumed by 100 SVG images vs 100 PNG images on different Android and IOS devices ...

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

Another bugging thing with SVG is that the Tag needs a width and height attribute for some Android/Samsung whatever browsers and our good old IE. And most modern SVG Editors like A***e Illustrator just add the "viewBox" attribute.

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

The coolest thing about SVG is that it renders nice and crisp in any pixel density.

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

回答by Steven Garcia

Unless you are showing very simple shapes/designs or specifically need to modify parts of the graphic with the app, there is not a whole lot of incentive to use SVG. You can produce a PNG at twice the original size (for retina displays) and still have the filesize be an order of magnitude smaller - not to mention better coverage for legacy browsers (no need for javascript or polyfills).

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

I say this as someone who builds UIs with vector graphics. It's an awesome design tool, but for delivery/bandwidth/reach it's hard to top PNG. Just last night I tested out a well known logo. CocaCola.svg was almost 20K. Since it was a solid/flat color I exported as PNG-8 with 12-color palette compression and got it down to 1.6K (!!!) For just a few logos it's not a big deal, but when you have to show 40 of them.. well, you get the picture.

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

The best part is that you can turn a PNG into a base64 data uri and embed them right in your stylesheet. This is not recommended with SVG - a format which is already famous for performance and compatibility issues, especially on mobile browsers.

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

In closing I have to say there are strengths and use cases for both, but PNG has blazed a lot more trails and you face less resistance when you go with the current. For those odd cases where SVG does make a better fit, I highly recommend this articleand this learning resource

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

Happy Designing!

快乐设计！

回答by barbaanto

It's true, png is used almost everywhere. I think it's because the SVG, in the most of cases, is pretty useless, the image should be bigger (i think) and the computer have to regenerate the image whenever you zoom it (because you always zoom the images, don't you?) I think this is the most important reason.

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

回答by Joe7

Let's note that performancewiseSVG can become horrible. Even on modern browsers, like Chrome (writing this in 2019 !), a CMS-like page with a few 100s (practically 3-800) of svg icons literally hangs the browser for 5+ seconds to finish rendering. Maxing out CPU meanwhile.

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

As noted elsewhere, the count of SVGs embedded in the page expontentiallyincreases the load on the browser, so if you happen to face such situation

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

Option #1: convert svgs into webfont (See performance chart here:http://frozeman.de/blog/2013/08/why-is-svg-so-slow/)

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

Option #2: fall back to plain old PNGs

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

In such situations where you ~never wanna do anything fancy like on-the-fly color modification, and you have MANY instances of SVGs, the old PNG does the job and saves the day!

在这种情况下，你永远不想做任何花哨的事情，比如动态颜色修改，而且你有很多 SVG 实例，旧的 PNG 可以完成这项工作并节省一天的时间！