我想知道为什么很少有现代网站仍然只使用PNG作为图标(但这个假设只是基于我的观察).到目前为止,我知道使用PNG而不是SVG的主要原因是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有什么诱人之处吗?

推荐答案

SVG可能是一个不错的 Select :

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

PNG可能是一个不错的 Select :

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

其他担忧:

  • 某些SVG编辑器可能会将元数据存储在SVG中,从而增加文件大小,并可能无意中expose 数据
    • 例如,在Inkscape中导出PNG时,保存时会将此目录的绝对路径保存在SVG中
    • SVG压缩器可能会将其删除,但我尚未对其进行测试(如果有,请随意编辑)

Html相关问答推荐

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

电话号码验证器(Angular )

在单独的容器之间堆叠上下文

如何从elementor中的滑块中获取文本?

如何制作带有粘性头和脚的可滚动车身

多次使用组件时计数Angular 14中嵌套数组的指令

如果您将带有 html 标签的字符串数据(name : test) 放在 `

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

标题在实时网站上闪烁

如何居中此按钮,即使它已经在计算机分辨率中居中

并排放置两个 div,同时 div2 环绕 div1

如何使用javascript在jsx中重复插入特殊字符?

在选项标签中如何添加Django模板的条件

CSS 网格跨度行到所有行

HTML、CSS设计图像出格

W3Schools 幻灯片相同高度

在身体外部创建 tanget 45° div

如何突出显示 .qmd html 文件中的特定代码行

水平滚动框不显示所有元素