内联 SVG 与图标字体 [CAGEMATCH]

如果您正在为网站构建图标系统，您有一些选择。如果您知道图标需要是栅格图像，那么您可能会使用 CSS 精灵。如果图标将是矢量图像（如今更为常见），您有一些选择。其中两个选项是使用内联 SVG 和使用图标字体。

让我们比较一下。

图标是矢量

矢量图标有很大的优势：可以随意放大缩小而不会损失质量，在视网膜显示屏上格外清晰，而且文件体积小。

图标字体	内联 SVG
浏览器将其视为文本，因此图标会以这种方式进行抗锯齿。可能导致图标不像您期望的那样清晰。	直接矢量

在我最近的一个个人例子中，当我将一些图标从字体转换为 CodePen 上的 SVG 时，一些字体图标明显不如我转换的图标清晰。

CSS 控制

图标字体	内联 SVG
您可以通过 CSS 控制大小（通过 `font-size`）、`color`、阴影、旋转等。	您拥有与字体相同的 CSS 控制，但更强大，因为您可以 1) 控制多部分图标的各个部分，以及 2) 使用 SVG 特定的 CSS，如描边属性。

内联 SVG 的最大优势可能是多色图标。

定位

图标字体	内联 SVG
定位字体图标可能会很麻烦。图标是通过伪元素插入的，它取决于 `line-height`、`vertical-align`、`letter-spacing`、`word-spacing`、字体字形的設計方式（它是否自然地具有周围的空间？它是否具有字距信息？）。然后伪元素 `display` 类型影响这些属性是否起作用。	SVG 的大小就是它的大小。

奇怪的故障

图标字体	内联 SVG
图标字体可能会出现故障，因为 1) 它在没有正确 CORS 标头的跨域加载，而 Firefox 不喜欢这种情况 2) 由于任何原因，字体文件加载失败（网络故障、服务器故障等） 3) 存在一些奇怪的 Chrome 错误，它会删除 @font-face 并显示回退字体 4) 令人惊讶的浏览器不支持 @font-face。字体故障由于各种原因非常常见。此外，如果您尝试执行一些巧妙的操作，例如将图标映射到 Unicode 的“专用区域”，而字体出现故障，它可能会发生一些非常奇怪的事情，例如显示意外的表情符号，因为您所在的環境使用相同的区域来表示表情符号。或者，该表情符号甚至可能覆盖您的字形！	内联 SVG 位于文档中。如果浏览器支持它，它就会显示它。

图标字体

内联 SVG

图标字体可能会出现故障，因为 1) 它在没有正确 CORS 标头的跨域加载，而 Firefox 不喜欢这种情况 2) 由于任何原因，字体文件加载失败（网络故障、服务器故障等） 3) 存在一些奇怪的 Chrome 错误，它会删除 @font-face 并显示回退字体 4) 令人惊讶的浏览器不支持 @font-face。

字体故障由于各种原因非常常见。此外，如果您尝试执行一些巧妙的操作，例如将图标映射到 Unicode 的“专用区域”，而字体出现故障，它可能会发生一些非常奇怪的事情，例如显示意外的表情符号，因为您所在的環境使用相同的区域来表示表情符号。或者，该表情符号甚至可能覆盖您的字形！

内联 SVG 位于文档中。如果浏览器支持它，它就会显示它。

强制故障

图标字体	内联 SVG
Opera Mini 或 UC Browser 等代理浏览器根本不支持 @font-face，即使它们有时会报告支持。因此，即使您尝试进行特征检测，它也可能失败。有些人强制使用自己的字体来覆盖您的字体，例如在用户样式表或专门用于应用自定义样式的浏览器扩展中。例如，一种用于应用字体的扩展，更适合患有阅读障碍的人。（有关图标字体可访问性的问题的更多信息，请参见 Seren D 的内容。）阻止技术可以自动或选择性地阻止自定义字体。（参考）	即使那些代理浏览器也支持 SVG。阻止程序不关心 SVG。

图标字体

内联 SVG

Opera Mini 或 UC Browser 等代理浏览器根本不支持 @font-face，即使它们有时会报告支持。因此，即使您尝试进行特征检测，它也可能失败。
有些人强制使用自己的字体来覆盖您的字体，例如在用户样式表或专门用于应用自定义样式的浏览器扩展中。例如，一种用于应用字体的扩展，更适合患有阅读障碍的人。（有关图标字体可访问性的问题的更多信息，请参见 Seren D 的内容。）
阻止技术可以自动或选择性地阻止自定义字体。（参考）

即使那些代理浏览器也支持 SVG。阻止程序不关心 SVG。

语义

图标字体	内联 SVG
为了负责任地使用，您正在通过在（空）`<span>` 上的伪元素注入图标。这不好或没有语义，取决于您对这种事情的看法。	图标是小图像。`<svg>` 的语义是“我是一张图像”。在我看来，这似乎更好。

可访问性

图标字体	内联 SVG
在使用图标字体时，您必须非常小心，以确保以可访问的方式进行操作。您基本上应该按照这篇文章中的方法操作。您始终在努力确保图标本身不会被读出（而是其他内容被读出），以及处理难以检测到的故障状态。	我不是专家，但是研究表明，使用适当的元素和属性组合（`<title>`、`<desc>` 和 `aria-labelledby`），您可以在各种浏览器中传递良好的信息。此外，没有奇怪的故障状态。

易用性

图标字体	内联 SVG
使用预先创建的图标字体从来都不是特别负责任的（太多未使用的图标）。创建自己的图标字体从来都不是很舒服。我认为最好的工具是 Pictos Server（仅限于 Pictos 图标）和 IcoMoon（免费登录以保存项目）。Fontello 具有 API，但我没有看到它用于构建良好的工具。	内联 SVG 系统更简单，因为您可以在需要时手动完成所有操作。或者使用 IcoMoon 等工具（以两种方式导出）。或者使用构建工具。

浏览器支持

图标字体	内联 SVG
非常深入。甚至 IE 6。	相当不错，但问题是 IE 8 及更早版本和 Android 2.3 及更早版本。回退可行，但并不理想。

获胜者

一切都取决于浏览器支持。如果您能够使用 IE 9+ / Android 3+，那么内联 SVG 在几乎所有方面都比图标字体更好。如果您需要更深入的浏览器支持，我觉得内联 SVG 回退会太麻烦，不值得（维护 PNG 副本，插入额外的元素以显示 PNG 版本，隐藏 SVG 元素……这很麻烦）。

Jacob

# 2014 年 4 月 22 日

我的天，我真的很想用 SVG，但是我仍然需要支持 IE8。太可惜了。

Ivan

评论的永久链接# 2014 年 4 月 22 日

如果您仍然需要一个快速工具来创建自定义社交图标。 http://perfecticons.com/ 是一个很棒的资源。

希望最终能有一个内联 SVG 版本。
Aaron Hall

评论永久链接# 2014 年 4 月 22 日

@ivan – 你的链接不起作用
Ivan

评论永久链接# 2014 年 4 月 22 日

@Aaron Hall – 奇怪。似乎正在获取流量。在 @jivinivan 处告诉我更多细节。
wojtiku

评论永久链接# 2014 年 4 月 23 日

你知道微软已经停止支持 Windows XP 了吗？这意味着 IE8 很快就会被淘汰，希望如此。你可以在这里查看我演讲的幻灯片 http://wojtiku.pl/speaking/ie8/ ，以获得一些关于放弃它的论据。这真的值得！
Michael

评论永久链接# 2014 年 4 月 27 日

这对我们来说是必须的（曾经是），但我们会为那些较旧的设备优雅地降低体验。
Matt

评论永久链接# 2014 年 4 月 30 日

@wojtiku Win 7 附带 IE8。许多非技术人员不愿意更新 Windows，而这是让 Win 7 机器运行 IE9+ 所必需的。
Ian

评论永久链接# 2014 年 4 月 30 日

对于 IE8，有一个名为 SIE SVG 的 polyfill，它使用 VML 作为后备。
O

评论永久链接# 2014 年 5 月 1 日

嗨，jacob

关于这一点，你所需要做的就是将你的索引链接到一个 modernizer.js 文件，你可以轻松地搜索和下载该文件。因此，包括 IE8 在内的所有浏览器都将支持 HTML5 和 CSS3 属性。

O,
Ricardo Zea

评论永久链接# 2014 年 5 月 1 日

@O，不正确。

Modernizr 是一个 **特性检测** 脚本，它不会神奇地使旧版浏览器支持 HTML5 和 CSS3 属性。

用 Modernizr 自己话来说

Modernizr 是一个 JavaScript 库，它检测用户浏览器中的 HTML5 和 CSS3 特性。– http://modernizr.com/

Neil

# 2014 年 4 月 22 日

嘿，Chris,

我尝试过按照你的指南创建 SVG（精灵图）。我手动创建了它们，但它们总是搞砸了。例如：svg 和 use 元素的大小不同。它们似乎不理会 CSS 面板中所做的编辑。只有部分显示出来。你是否有关于在将 SVG 组合在一起之前应该如何保存它们的指南？我从你的 CodePen 中拿了一个 SVG 并尝试了一下，它很好。但我自己的和从 icoMoon 下载的那些似乎都出现了严重错误。谢谢，Neil

Johan Chouquet

# 2014 年 4 月 22 日

嗨,

有趣！我会尝试一下 IcoMoon 的这个功能，我还没有测试过。

Johan

Aaron Hall

# 2014 年 4 月 22 日

有趣的文章。我认为 http://fontawesome.io/ 是一个很棒的产品（惊讶它没有在文章中提到）。它非常易于使用，可以应用于任何类。

Adonis K.

评论永久链接# 2014 年 4 月 27 日

Chris 在那里列出的不是“酷图标字体”，而是只加载你需要的图标字形的方法（而不是包含几十甚至数百个未使用字形的整个图标字体）。

Ricardo Mestre

# 2014 年 4 月 22 日

性能怎么样？图标字体是通过将大量图标组合到单个文件中来减少 HTTP 请求数量的好方法。你甚至可以将字体文件作为 base 64 嵌入到你的主 css 文件中。

另外，关于“语义”：我不认为图标是“小图片”，因为那不是内容的一部分。图标是装饰的一部分，是视觉上的提示或指示。

Eric Wilson

评论永久链接# 2014 年 4 月 22 日

**内联** SVG 嵌入到文档中，因此没有额外的 HTTP 请求。不过，由于它不会缓存内联 SVG 以供其他文档使用，因此会有一些影响。
Shaw

评论永久链接# 2014 年 4 月 22 日

关于性能/HTTP 请求，你不能使用一个包含所有图标定义的外部 SVG 文档，并在页面上通过 `use` 标签引用它吗？这将提供缓存的优势，并最大限度地减少 HTTP 请求。
Shaw

评论永久链接# 2014 年 4 月 22 日

啊，找到了我自己的问题的答案。浏览器对外部 `use` 引用的支持还没有完全到位（使用 SVG 精灵的图标系统，在“这将变得更好”下），主要是在 IE 中。

似乎你可以使用一个后备，它会 AJAX 加载外部 SVG，在 `body` 标签之后的第一件事就将其插入 DOM，然后 `use` 标签将正常工作，或者可能需要更新以删除外部引用，只使用 id（从 `＜use xlink:href="icon.svg#Menu"＞` 到 `＜use xlink:href="#Menu"＞`）。

这似乎比用 `object` 标签替换它更优雅，并且可以让浏览器缓存图标（后备或非后备），并防止实际 HTML 的大小膨胀。
Jozef Remen

评论永久链接# 2014 年 4 月 24 日
Shaw，这正是我正在做的事情，AJAX 加载 SVG。它工作得很好。

jQuery
$(‘img[src*=”.svg”]’).each(function() {
var svg = $(this).attr(‘src’);
var svgClass = svg.replace(/^.+\/([^\/]+).svg/g,’$1′);
```
    $(this).load(svg, function(i) {
            $(this).children('svg').unwrap();
            $('svg').children('style').remove();
    });
});
```

Michael Smith

# 2014 年 4 月 22 日

总的来说，我不反对你的结论，但我认为字体至少在某些情况下可以在语义上胜出。我主要想到的是图标伴随它想要传达的文字的情况，例如：“[汉堡包] 菜单”。

在 SVG 的情况下：那里语义上有一个图像，对我来说这意味着该图像传达的信息超出了文本中包含的信息。从视觉上讲它确实如此，因为它提供了一种无需阅读实际文字即可快速识别的工具；然而，在语义上，它只是重复。

在图标字体的例子中：那里有一个 span，按照惯例，它在语义上是中性的（换句话说，它不会给人一种传达额外信息的印象）。

这只是一个细微的争论，可能更多是观点问题而不是其他问题。而且，显然，这并不适用于图标单独存在或实际上传达额外信息（如火花线等）的情况。

NSDCars5

# 2014 年 4 月 22 日

我迫不及待地等待着 2020 年代，到那时微软将停止支持 Windows 7，以及随之而来的 Internet Explorer 8。

还有 Chris，感谢你的文章！它促使我学习 SVG。:D

Adonis K.

评论永久链接# 2014 年 4 月 27 日

假设 Windows 能持续那么久 :D

Scott Fennell

# 2014 年 4 月 22 日

希望你已经为 [cagematch] 注册了短代码。

Paolo

# 2014 年 4 月 22 日

使用来自 filament group 的很棒的 Grunticon 来使用 SVG http://filamentgroup.com/lab/grunticon 用于 DIY 命令行版本，或 http://www.grumpicon.com/ 用于 web 应用程序版本。
它会为你处理所有后备 PNG 和 css。

Shaw

评论永久链接# 2014 年 4 月 22 日
我使用并喜欢 grunticon（或者至少是 grumpicon webapp），但我感觉这种实现可能缺少 Chris 提到的某些优点，因为 SVG 是作为 `background-image` 插入的。

例如，以 `:hover`/`:active` 状态为例。使用内联 SVG，你可以通过 CSS 控制 `stroke`、`fill` 等，并能够 `animate` 或 `transition`，但使用 grunticon，你被迫用另一个图标替换它才能更改颜色。每个状态都会增加 CSS 包含的权重，因为你有多个相同图标的副本。

我很想看到一个类似于 grunticon/grumpicon 的工具，用于将 SVG 文件夹编译成一个包含所有图标定义的文档，可以通过 `use` 标签访问。就像 grunticon 一样，该工具还可以为 IE8 和 Android 2.3- 创建一个 PNG `background-image`（base 64 编码）后备，然后为 IE7- 创建一个外部 PNG `background-image` 后备。

标记可能类似于
```
＜span class="icon icon-Menu"＞
＜svg＞＜use xlink:href="icons.svg#Menu"/＞＜/svg＞
＜/span＞
```
（如果显示不正确，请原谅我。它的预览一直没有显示代码）

在你的 CSS 中，你需要设置 `span` 的大小，并使用 `width: 100%; height: 100%` 使 `svg` 适应它（可能需要一个 viewbox 属性，我不确定）。后备 CSS 将定位 `span` 以使其具有 PNG `background-image`，并使用 `background-size: contain`

有人有兴趣接手吗？:D
Jozef Remen

评论永久链接# 2014 年 4 月 24 日

我真的不明白为什么还要费心处理 IE 7，甚至 IE 8。Windows XP 已经停止支持了，我真的无法想象为什么有人会在 Windows 7 上使用 IE 8。

使用 IE 8 的用户数量非常少，以至于我再也不费心了。是的，我更喜欢 Statcounter 的统计数据，因为 NetMarket Share 的统计组真的很小（大约 45000 个网站），主要来自电子商务，主要来自中国。这真的不是需要考虑的事情。点击就是点击，如果我可以选择，我更愿意选择来自 Statcounter 的更大的统计组（超过 500 万个）。

我管理的网站上的 Google Analytics 告诉我 IE 8 的市场份额更小（远低于 5%）。Android 2.3 已经死了，因为这些设备非常非常老，主要用作哑手机。

伙计们，我们应该展望未来，而不是回顾过去，并注意用户无法在 10 年内更新浏览器。在网络和 IT 方面，这相当于新石器时代。
Simon

评论永久链接# 2014 年 4 月 25 日

@jozef

我会小心，不要忘记你正在开发的网站上约 5% 的流量。

相反，你可以争辩说，这是一种渐进式增强（如果你的情况是这样），图标可能是锦上添花，但不是必需的，因此可以针对 IE8 删除。

但总的来说，我认为我们大多数人将不得不继续确保 IE8 在我们开发的网站上至少可用一段时间，仅仅因为微软停止了对 XP 的支持，并不意味着大量用户不会继续使用 XP 一段时间。
Jozef Remen

评论永久链接# 2014 年 4 月 25 日

Simon，我真的不在乎。我的政策是支持最新的两个版本。我唯一愿意做的是显示有关旧浏览器的警告，并提供下载其他新浏览器的选项。允许用户仍然访问网站，但没有任何优化或修复。

如果我们坚持支持新石器时代的浏览器，我们现在可能还在为 IE 6 开发。说真的，用户可以购买新款手机，更新音乐播放器应用程序，更新愚蠢的 Flash，更新 Acrobat，但他们不愿意更新浏览器吗？

philtune

# 2014 年 4 月 22 日

很高兴你提到了对 IE8 的支持。我的收件箱里充满了关于 SVG 最新见解的新闻稿，但我甚至无法开始玩弄它们，因为 IE8 的回退很麻烦。这不像在 IE8 中没有文本阴影或圆角那样简单。SVG（和图标系统）可以解决我们很多性能问题——我的图形设计师不明白我为了压缩他臃肿的文件而经历了什么。

我最大的希望是，随着对 XP 支持的结束，企业和学校（我们大多数流量来自那里）将很快升级到 Win7|8，并直接升级到 IE10+。这样，一整个新的可能性世界就会出现。（天哪，我需要开始学习更多关于……）

philtune

评论永久链接# 2014 年 4 月 22 日

*<canvas>

Andrew scarfacedeb

# 2014 年 4 月 22 日

我被说服了！不再使用图标字体。
感谢你如此全面的分析。

maxw3st

# 2014 年 4 月 22 日

我喜欢 SVG 的另一个特性是，它能够对相同的图像代码进行真正的矢量缩放。这里：http://maxw3st.us/svgshare/share_reveal.html 页面顶部的图标和“分享”面板下的图标使用的是相同的 SVG 代码，只是大小不同。如果你想在 RWD 中调整图像大小，而不想使用多个图像副本，这会非常方便。CSS 代码中的注释解释了我是如何做到的，只需“查看源代码”。

andreas

# 2014 年 4 月 22 日

如何在 CMS 的编辑器中使用 SVG？

will_wallace85

评论永久链接# 2014 年 4 月 22 日

对于大多数 CMS，你只需要在文本编辑器中打开 SVG 文件，将其复制出来，然后粘贴到编辑器中的文本视图中。如果它被删除了，你将需要一个允许它的扩展程序/插件，或者你需要将 SVG 上传到你的 Web 服务器，并像其他任何图像一样调用它们。

Flunch

# 2014 年 4 月 22 日

我同意你所说的一切，但你（故意地）忽略了一些方面
– 性能
内联 SVG 没有缓存（每个页面都加载相同的图标）
字体会多一次请求
使用 SVG 会导致更深、更复杂的 DOM => 解析/CSS 渲染速度更慢
总的来说，37kB 的 SVG => 6kB 的 .woff 文件（根据我目前的项目）
– 样式
可以通过 CSS 颜色更改图标颜色，但只能更改一种颜色
通过 CSS 更改 SVG 颜色的复杂性，但颜色灵活
– 渲染
SVG 仍然存在奇怪的渲染错误（IE 中模糊不清……）

Fábio ZC

评论永久链接# 2014 年 4 月 26 日

绝对！点赞！
这篇文章中忽略了一些要点。
Adonis K.

评论永久链接# 2014 年 4 月 27 日

+1
Ian

评论永久链接# 2014 年 4 月 30 日

WOFF 默认情况下是压缩的，而 SVG 不是。比较压缩后的尺寸。
你可以使用 SVG 精灵 - 只有一个请求包含所有图标。
CSS 解析现在速度非常快，不用担心。

Chris Poteet

# 2014 年 4 月 22 日

不要忘记动画。使用图标字体，你只能对整个图标进行动画，而使用 SVG，你可以对单个组件进行动画。

Glynn

# 2014 年 4 月 22 日

有人知道内联 SVG 有哪些可靠的回退吗……例如回退到 PNG 精灵？

Jozef Remen

评论永久链接# 2014 年 4 月 24 日

我会使用带有 SVG 的元素，并在 src 属性中使用它。使用 AJAX 将其加载到内联以进行缓存，并在 Modernizr 检测到内联 SVG 为假的情况下回退到 .png（只需将 img 元素中的扩展名从 svg 更改为 .png）。

是的，如果你想对它进行着色，这可能是个问题，但在这种情况下，我还会在样式表中使用 .no-inline-svg 类。

Alexander Prime

# 2014 年 4 月 22 日

为了可访问性和语义，使用基于连字的图标字体并允许它正常读取有什么问题？如果字体面失败或类似情况，它只显示文本，而不需要任何超出简单 class="icon" 的标记。

Tune

# 2014 年 4 月 22 日

是我吗？还是多色支持不是 SVG 相对于图标字体的一大（主要）优势？

Clint Brown

评论永久链接# 2014 年 4 月 22 日

多色图标字体也是可能的，例如 http://pixelambacht.nl/2014/multicolor-icons/

在更复杂的项目中管理内联 SVG 比图标字体 + 伪元素要灵活得多，图标字体 + 伪元素可以在不改变标记的情况下添加到任何地方。

如果你采用内联 SVG 路线，并且需要在页面上多次使用相同的图标（例如，每篇文章都有分享图标），你的文档大小会迅速膨胀。

我同意 Flunch 的观点，我认为图标字体（更小，可缓存，不会出现代码重复）在性能方面会优于内联 SVG。有人知道这方面的测试案例吗？

Mohammad Hamza

# 2014 年 4 月 22 日

我刚刚对除了字体之外的矢量图标有了新的想法。

Jonny

# 2014 年 4 月 22 日

我正在当前项目中使用 SVG 图标精灵表……压缩并以 base64 格式编码到我的样式表中（参见 Chris 一年前的帖子“使用 SVG”和底部的视频 https://css-tricks.org.cn/using-svg/）。我会使用 Modernizr 为旧的糟糕浏览器提供 PNG 精灵表回退。

图标清晰明了，加载量很少，HTTP 请求减少，而且对所有人都适用。

我错过了什么吗？

Amelia BR

评论永久链接# 2014 年 4 月 24 日

使用 SVG 图像作为精灵表有两个限制

性能：浏览器会为每个图标绘制整个 SVG，在旧版 Chrome/Firefox 和所有 IE 浏览器中，有时你会注意到大型精灵表位置发生变化时会出现延迟.
无法通过 CSS 控制/交互图标，它只是一个静态图像。因此你不能在悬停时更改颜色，或者让图标与周围的字体颜色匹配，除非你替换精灵表中的另一个图标。（此外，没有特殊的 SVG 可访问性元素，但它们显然不受很好支持，你应该像对待 PNG 精灵图标一样，在 span 中使用标题/替代文本。）

但如果你的项目中没有遇到这些问题，那就没有理由停止你正在做的事情。

Ricardo Zea

# 2014 年 4 月 22 日

从一开始我就知道 SVG 会获胜……直到关于浏览器支持的最后部分。

我对内联 SVG 的一个问题是，你所有的 SVG 代码都在页面中，这使得标记不一定“难以阅读”，但会让你在视觉上跳过所有 SVG 代码，才能找到/编辑你真正需要的部分。

在我看来，图标字体被反锯齿处理真的没什么大不了的。完全没有。说真的，只有受过训练的眼睛才能看到反锯齿处理是多么微不足道，最终用户看不到，而且他们也不会在乎。

图标字体受 line-height、vertical-align、letter-spacing、word-spacing、font-size 等影响……为什么这不好？为什么这会是“大问题”？我们一直都在处理 Web 字体，甚至系统字体！说真的，我个人在使用图标字体时，从来没有遇到过 vertical-align、letter-spacing、word-spacing 问题，从来没有。

我更喜欢不将 SVG 嵌入到我的标记中，而是简单地调用 SVG 文件，就像调用图像一样，在我看来，这是使用 SVG 的理想方式。这样做的一个问题，对我来说是一个“红色方框”（Chris 使用红色方框表示负面因素），是无法使用 CSS 影响 SVG。请告诉我我错了，实际上有一种方法可以做到。

IE8 仍然是一个主要参与者，因此，我计划在不久的将来继续使用 PNG 回退，并使用图标字体而不是 SVG。我相信其他人，很多人，也面临着同样的 IE8 问题。

Chris Coyier

评论永久链接# 2014 年 4 月 23 日

为什么这不好？为什么这会是“大问题”？

也许它不适合你。这里涉及很多因素。我个人发现其中一个非常令人头疼。它是“这里有一个特定大小的盒子，可以预测地放置它”与“这里有一个大小未知的盒子，其中图形可能与盒子的边缘对齐，也可能不对齐，祝你好运”。

Julien Jolly

# 2014 年 4 月 23 日

有趣的帖子。
我认为你应该将浏览器支持的背景更改为红色；)

Pete

# 2014 年 4 月 23 日

我同意你所说的一切，尽管内联 SVG 确实有一些缺点，主要与性能相关。

你无法缓存它们。10kb 的嵌入式内联 SVG 必须在每次页面加载时下载。
DOM 开销。内联 SVG 是 DOM 树的一部分，DOM 树越大越复杂，出现明显性能下降的可能性就越高。

引用 SVG 元素 <use/> 可以缓解其中一些问题，如你所述，链接 CSS 可用于使内联 SVG 尽可能精简。

有关我所谈内容的示例，请查看此页面背后的源代码。
http://the-echoplex.net/csscrush/

Chris Coyier

评论永久链接# 2014 年 4 月 23 日

你无法缓存它们。10kb 的嵌入式内联 SVG 必须在每次页面加载时下载。

没错。可以假设页面已缓存。这意味着你的整体页面缓存有点臃肿。但这总体上可能不是什么大问题。

理想情况是 <use xlink:href="link/to/svg.svg#icon ... >，这意味着它可以被缓存。但 IE 中不支持任何东西。

Dean

# 2014 年 4 月 23 日

我认为在 CSS 中使用 SVG 而不是内联会是一个不错的解决方案。

好处
– 为缺少 SVG 提供回退，使用 moderinzr
– 你可以更新整个网站的图像，而内联 SVG 则可能有多个位置。

Felipe

# 2014 年 4 月 23 日

真的是一个很棒的解释，我会在一些项目中使用 SVG 图标。

علی‌رضا

# 2014 年 4 月 23 日

您可以使用 SVGMAGIC 服务来支持旧浏览器：svgmagic.bitlabs.nl

Ricardo Zea

评论永久链接# 2014 年 4 月 23 日

+1

SVGMagic – http://svgmagic.bitlabs.nl
Chris Coyier

评论永久链接# 2014 年 4 月 23 日

那是针对 SVG 作为图像，而不是内联 SVG。它很不错，但请注意，它对每个不支持浏览器的页面查看都会向他们的服务器发出 AJAX 请求。

shohel

# 2014 年 4 月 23 日

学习 CSS 的好地方。CSS 确实是设计领域的主要因素。更了解 CSS 的人可以设计得更加美观。要构建一个更好的、专业的网站，你必须成为 CSS 大师。
动画视频制作

Daniel

# 2014 年 4 月 23 日

你无需注入空图标。很多人都是这么做的，但你可以使用伪元素通过图标字体来实现语义文档中参与的常规元素。在我看来，内联 SVG 语义性较差，因为你在文档中定义了图像。

定位伪元素并不难。它就像一个普通的内联元素。如果你不想使用它，可以将其设置为绝对定位，大功告成。

Chris Coyier

评论永久链接# 2014 年 4 月 23 日

你可以使用伪元素通过图标字体来实现语义文档中参与的常规元素。

然后伪元素会被大声朗读。使用 span 的目的是，你可以在其上使用 aria-hidden。

定位伪元素并不难。它就像一个普通的内联元素。如果你不想使用它，可以将其设置为绝对定位，大功告成。

绝对定位如何解决围绕字形的盒子难以预测的问题，因为许多其他属性（以及其他内容）都会影响它？

Taufik

# 2014 年 4 月 23 日

SVG： 必须多次声明，如果它是内联图标，大小可能非常长。除非将其设置为背景图像作为精灵图，但那样就无法再调整大小了。更改字体大小不会更改图标大小。

图标字体： 可以包含在 HTML 类中，并保持可调整大小，大小可以根据周围文本的大小轻松更改。更改字体大小会更改图标大小。

PS：外部 SVG 是否可缓存？

Chris Coyier

# 2014 年 4 月 23 日

必须多次声明

不，你只需要声明一次，然后在多个地方 <use> 它。

除非将其设置为背景图像作为精灵图，但那样就无法再调整大小了

无论你如何使用 SVG，都可以调整大小。

外部 SVG 是否可缓存？

可以。

Taufik

评论永久链接# 2014 年 4 月 23 日

谢谢。
Michael Whyte

评论永久链接# 2014 年 4 月 24 日

不，你只需要声明一次，然后在多个地方 <use> 它。

你难道没有说 IE 中不支持任何东西吗？据我所知，IE 仍然是主要的浏览器玩家……

只是说说而已……
Jozef Remen

评论永久链接# 2014 年 4 月 25 日

你难道没有说 IE 中不支持任何东西吗？

指的是直接使用 SVG 片段调用精灵图。就像

在顶部使用 SVG 精灵图，并将 <include> 作为这样的精灵图，这将在 IE9 及更高版本中运行

据我所知，IE 仍然是主要的浏览器玩家……

你真的不应该把 NetMarket Share 的统计数据当真。Chrome 和 Firefox 的总和远远超过 IE。真的。据我所知，至少在欧洲，IE 8 的份额非常小，我已经不再费心去修复它了。这些人无论如何都不值得作为客户。如果他们不愿意在 12 年后更新到较新的 Windows 版本，在非常旧的电脑上运行它，他们会花在网店上的钱吗？我认为不会。

Mick

# 2014 年 4 月 23 日

我一直在构建的网站最初使用的是 SVG 精灵图。一切看起来都很好，跨浏览器渲染也很不错，但我真正注意到的是性能。

滚动页面时，延迟非常明显。每个页面使用 20 到 50 个图标用于各种元素。延迟非常明显，以至于客户对此进行了评论和抱怨。

我已经将所有内容切换到自定义图标字体，现在不再出现滚动延迟。对我来说，这是一个重要因素，因为它是用户会注意到的东西。页面感觉很卡顿，很 buggy。无论你的图标多么清晰，如果你的网站或 webapp 给人一种缓慢的印象，那么它就会降低用户的体验。

如果有办法缓解这个问题，我当然会 100% 使用 SVG，但对于一个使用超过 4 或 5 个图标的网站来说，现在对我来说根本行不通。

Sean Cooper

# 2014 年 4 月 23 日

我最近一直在为这个问题苦恼，发现嵌入式 svg 的可访问性有点问题，并不一定是理想的。

http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility/

基本标题和描述标签的浏览器支持很差，因此需要使用 aria-labelledby。我也不是这方面的专家，但如果不确定使用 svg 而不是 png 或图标字体的网站 SEO 效果，我就无法使用它们。

我最终选择使用 svg 作为 img 和背景图像，并使用图像替换技术，当然缺少编辑功能，但这意味着我使用的是用户肯定能理解的数据。

此外，使用 sass mixin 可以轻松地为 ie8 实现回退，而使用 grunt 可以处理最小化和 png 转换。

如果有谁对嵌入式 svg 可访问性和这种实现的 SEO 影响有更多信息，请告诉我。

Timothy Miller

# 2014 年 4 月 24 日

真的很喜欢这种类型的文章，特别是当它挑战像图标字体这样的行业规范时。更棒的是它倾向于使用 SVG，我一直很喜欢 SVG（理论上），它比图标字体这样的 hack 好多了。Chris 写得很好！

Michael Whyte

# 2014 年 4 月 24 日

首先我要说我喜欢 SVG 的想法和概念，但我不同意它们自动优于图标字体……

如果你曾经创建过中等复杂度的 SVG，那么你就知道会产生多少标记。所以每次你想使用一个简单的图标时，你的页面都必须渲染出一个小的 XML 文档，而不是仅仅是“”或“” 意思是内联 SVG，而不是 image 标签中的 SVG。

图标字体可以在一个 HTTP 请求中包含大量的图标，可以缓存，可以缩放，可以编写一次使用多次，对于非开发人员来说更容易理解和使用（我的观点），并且具有更深层的浏览器支持。

图标字体仍然有其用途，我不建议现在就抛弃它们，它们仍然有很多优势。

我将在 SVG 有意义的地方使用 SVG，例如 logo 和数据可视化，并将继续使用图标字体来实现图标。

Jozef Remen

评论永久链接# 2014 年 4 月 25 日

所以每次你想使用一个简单的图标时，你的页面都必须渲染出一个小的 XML 文档

不正确。你只需要包含一次，在顶部，紧接在之后。然后你只需要在需要的地方使用它。

你们都读过这篇文章吗？为什么这里这么多人都在说一些根本不正确的事情？

读一读。再读一读。再读一读。

使用 SVG 精灵图的图标系统

缓存可以使用标签加载 SVG 作为普通图像，然后使用 AJAX 将其包含到 DOM 中。在这种情况下，你可以使用 Modernizr 很好地制作一个 PNG 回退，如果 SVG 不受支持，你只需要将扩展名从 .svg 更改为 .png 即可。搞定。
dubious

评论永久链接# 2014 年 6 月 19 日

我只是想说，我认为第一个发帖人是对的，对于 SVG 来说，每次显示图像时，它可能都会被重新 *渲染*，即使没有 http 请求。这只是一次，但我无法理解它为什么只渲染一次，却出现两次或更多次。它是否以不同的“格式”被“缓存”，更像是从函数（渲染）中得到的“变量”，而不是每次都必须重新运行的“函数”？我猜它甚至在理论上可能取决于浏览器引擎。

Rahul Sethi

# 2014 年 4 月 25 日

非常有用的文章，关于内联 SVG 与图标字体。有人可以告诉我如何在 WordPress 博客中的小部件中使用它吗？

Sohil Memon

# 2014 年 4 月 25 日

嘿，伙计，很棒的比较。我非常喜欢它，从没想过“内联 SVG 与图标字体”之间会有如此大的区别。感谢你的帖子：D

Drew Tipson

# 2014 年 4 月 25 日

当然，有用于字体的构建工具。grunt-webfont 就是其中之一。我在一个项目中使用它，我可以将 svg 文件放到图标文件夹中，然后 boom，我的 grunt 监听任务会重新编译字体，然后更新我的 .sass 文件以根据文件名包含图标的类（实际类和占位符，便于使用）。非常流畅，非常容易。

并不是说我不非常期待 SVG 精灵的时代。

Nora

# 2014 年 4 月 28 日

很棒的帖子，Chris :)

Ferdy

# 2014 年 4 月 28 日

我同意 @Mick 的观点：将渲染性能也包含在比较中会很有意思。我已经有一段时间没有使用内联 SVG 了，但那时一些浏览器中糟糕的渲染性能使其成为一个障碍。

Michelle

# 2014 年 4 月 28 日

我不得不不同意“易用性”的评估 - 我在一个小时内学会了如何使用图标字体，但 SVG 似乎有更陡峭的学习曲线。我尝试过遵循教程，但很多教程似乎都是从“在 Illustrator 中编辑文件”或“让 Grunt 运行起来”开始的 - 我还没有学会如何做这两件事。

毫无疑问，非常值得学习，它也确实在我的学习清单中，只是想指出对于像我这样的新手来说，当我只想包含几个社交媒体图标、一个放大镜，也许还有几个星星时，预制图标字体有更多的支持。:)

Tim

# 2014 年 4 月 28 日

我使用图标字体而不是内联 SVG 的主要原因是，将 Font Awesome 放入项目中并获得大量很棒的图标实在是太容易了。对我来说，图标字体的易用性要好得多，而且 Font Awesome（免费）附带了许多很棒的预制图标，这很棒，因为我对 Illustrator 不擅长。

Daphne

# 2014 年 4 月 30 日

这些图标在小尺寸下渲染的图片吗？大多数图标字体（和 SVG？）都在这里失败了。

Alec Perkins

# 2014 年 4 月 30 日

我尝试在最近的一个项目中使用内联 SVG，但将外观方面包含在标记中的工作流程复杂性太大了，在某些情况下是不可能的。图标字体能够完全保留在 CSS 中，并且如果使用得当，可以维护语义标记和类。（如果用作图像，SVG 也可以，但你会失去很多优点。）

Arul

# 2014 年 5 月 1 日

我开始在项目中使用 SVG，它无疑是一种用途广泛的媒介，可以增强网站的吸引力，但话虽如此，浏览器支持确实让我担心，但更重要的是性能问题让我更加担心。它比图标字体慢得多，但我还是决定继续使用它。我使用的是 SVG 库，并且使用 Modernizer 进行了 png 回退。

SVG 的一个主要优点是能够使用 CSS 来进行路径操作，使用 CSS3 动画和一个好的 SVG 库，比如 snap，你可以让你的 SVG 变得更加交互式。我认为这值得付出代价。

Ricardo Zea

永久链接到评论# 2014 年 5 月 1 日

没有什么是值得为了更慢的性能而付出的。
Chris Coyier

永久链接到评论# 2014 年 5 月 1 日

不要只是说“SVG 更慢” - 这种说法很容易传播，而且可能会有害。提供一些测试案例怎么样？
Shaw

永久链接到评论# 2014 年 5 月 1 日

我使用 Font Awesome 的图标集，将内联 SVG 图标与字体图标进行了简单的比较。

比我聪明的人可以运行测试来真正评估 SVG 图标与图标字体的速度……
Ricardo Zea

永久链接到评论# 2014 年 5 月 2 日

@Shaw，还没有运行任何测试，但你的演示页面太棒了。我还想评论两件事

图标字体在我的 Firefox 29.0（Win 8.1）中没有加载。这里有屏幕截图：http://img845.imageshack.us/img845/5494/g51t.png。它们在 Chrome 中加载正常。
在你的第三条评论中，你说：“每个图标的标记量是 SVG 的两倍 (<svg viewBox=”0 0 34 32″ class=”fa fa-glass”><use xlink:href=”#fa-glass”></use></svg>) 与图标字体 (<i class=”fa fa-glass”></i>) 相比”，图标字体可以通过 :before 和/或 :after 伪元素轻松应用，从而进一步减少实现图标字体所需的标记量。

实际上，我在 Stack Overflow 中关于如何使用 Font Awesome 的图标字体而不使用 <i> 元素的答案中也发布了一些类似的内容：http://stackoverflow.com/questions/12303533/using-font-awesome-icons-as-bullets/14806308#14806308

无论如何，再次感谢你的很棒的工具！

englishextra

# 2014 年 5 月 7 日

我认为使用 svg 没有任何问题，并使用 Modernizr 提供对 PNG 的回退。PNG 必须使用 Illustrator 中的曲线来制作。是的，图标字体是一种不好的做法。

Original_red

# 2014 年 5 月 8 日

哇。SVG 对于许多任务都很棒，但图标字体也是如此。——图标没有 **一个** 解决方案。

这里有一些东西可以平衡一下这篇文章。

图标字体
+ 轻量级得多

存储在缓存中（链接的 SVG 也一样）
渲染强度更低（浏览器中对文本的次像素渲染更加成熟）
顺便说一下：没有“纯粹的矢量”这样的矢量屏幕渲染。（不要问我为什么 Mac 上的 Safari 会将文本渲染为云。）
更少的混乱
更少的工作，获得更多回报
更易于用更少的代码控制（取决于你的 CSS 技能）
不会膨胀 DOM。内联 SVG 会给 CSS 渲染引擎和 JS 引擎带来不必要的麻烦（谨慎地说）。

我认为这场笼斗很愚蠢，但最重要的是令人失望。我对你的期望更高。

SVG 很棒，但图标字体也很棒，链接的 SVG 也一样。在某些用例中，所有事物都会闪耀。内联 SVG 是这三种方法中最差的“一个解决方案”。

Noel Forte

# 2014 年 5 月 9 日

最近在使用 SVG 和图标字体时，我发现了一件事，那就是 SVG 在处理 CSS 过渡时表现不佳，尤其是当它们被包装在具有 http:// 协议的 <a> 标签中时。然而，奇怪的是，https:// URL 允许过渡正常工作。对于图标字体，你只需要担心 :hover 状态之类的简单 color 过渡。

我注意到 CSS-Tricks 在此页面底部的社交链接上进行了过渡，但与所有其他包装在 <a> 标签中的 SVG 一样，它们不起作用。

Jörn

# 2014 年 5 月 19 日

仅供参考：Firefox 在 24 版本之前有一个错误，导致 SVG 呈现效果很差：http://stackoverflow.com/a/11297217/818732

Juan

永久链接到评论# 2014 年 6 月 24 日

我认为当前版本 (30) 更糟糕。

andreas

# 2014 年 6 月 19 日

我试着使用 svg - 内联和作为精灵。嗯，作为精灵它很好，但颜色方面的缺点是一个很大的缺点。你可以改变“颜色”的唯一影响就是透明度。但要从红色更改为绿色 - 你必须在精灵中设置不同的“项目”。

嗯，内联 svg 对于图标来说完全不合适。对于徽标……可以，但对于图标？没有哪个编辑会写一篇文章，并且在文章末尾设置一个带有箭头的按钮，这个按钮以内联 svg 开始 - 对不起，不行。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。