SVG图标与现代网站中的PNG图标 [英] SVG icons vs. PNG icons in modern web sites

问题描述

我想知道为什么这么少的现代网站仍然只使用PNG图标（但这个假设只是基于我的观察）。到目前为止我知道，使用PNG而不是SVG的主要原因是IE8和SVG使用更多的CPU功率（但我不认为这对于简单的1K图标来说是个问题）。我可以看到（我们目前使用）使用SVG的许多优点，无论是作为精灵使用，还是作为内联SVG使用。

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 Sprite vs SVG sprite vs图标字体侧重于性能而没有相关答案，图标字体与SVG缓存和网络关注关注网络流量，但它可以通过模板化轻松解决。）

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

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

推荐答案

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

Reasons SVG may be a good choice:

• 它无缝支持任何大小的浏览器，尤其是css的 background-size


• 你可以向上/向下缩放它们，例如到转移效果


• 您可以嵌入SVG并使用JavaScript和DOM对它们进行实时修改


• 您可以使用CSS（更改颜色，轮廓等）来设置SVG和部分SVG的样式。


• 您可以在客户端或服务器上动态生成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.

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

Reasons PNG may be a good choice:

• 浏览器支持


• 用于创建PNG spritesheets的现有工具


• 大多数人的电脑上都有与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

其他问题：

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

  这篇关于SVG图标与现代网站中的PNG图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！