图形图标几乎是每个网站或应用程序的重要组成部分。虽然图标的大小通常很小，但为web图标选择格式并非易事。除了标准的图像格式，Web开发人员还有两个主要选项：SVG或图标字体。你应该使用哪一个？让我们看看这两种格式在性能，灵活性和可访问性方面的比较。

Web图标的演变

在CSS之前的时间，网络图标必须是图像。由于图像文件很大，因此Web开发人员一直试图找到显示小图标的替代方法。例如，CSS精灵允许开发人员将所有图标保存在单个图像文件中，但是由于图标字体在2012年左右到达现场，因此可访问性问题导致它们不再受欢迎。但是，最近，开发人员正在转向使用可扩展的矢量图形或SVG，用于其Web图标。

什么是图标字体？

图标字体是可以使用CSS修改的文本文件。因此，它们比光栅图像更好地缩放，因此更改图标字体的大小不会降低其视觉质量。更改颜色或添加阴影就像编辑文本一样简单。您可以轻松找到要在您的网站上使用的免费图标字体，或者您可以自己设计。使用图标字体的一个缺点是，大多数字体集包含您可能不会使用的图标，因此它们只占用空间。

就像之前的CSS精灵一样，图标字体开始不受开发人员的青睐。正确显示图标字体通常需要浏览器向服务器发出额外请求，这可能导致在图标仍在加载时图标上出现FOIT或隐藏文本的闪烁。如果浏览器无法解释字体，则用户只会看到空字符。由于这些场景对于专业网站来说是不可接受的，因此更多的开发人员现在转向使用SVG。

什么是SVG？

SVG（可缩放矢量图形）允许矢量图形显示在浏览器中。SVG正在迅速成为网络图标和动画的新标准。它们不仅提供出色的缩放，而且它们通常比图标字体更快速，更可靠地呈现。由于矢量图形完全由代码组成，因此不必从大型外部文件导入它们。它们的尺寸也比典型的JPG或PNG以及大多数图标字体库小得多。

充分利用您的SVG可能需要克服一点学习曲线，但奖励非常值得付出努力。

SVG如何工作

可以<img>在HTML中的常规元素中使用SVG，使用width和height属性来调整尺寸。但是，此方法在某种程度上限制了您自定义SVG的能力。

如果您希望能够直接从HTML中进一​​步自定义SVG图标，则只需将代码直接粘贴到HTML文档中即可内联SVG。然后，您可以通过使用CSS定位来更改颜色或应用过滤器。以下是SVG图标的示例：

上面的代码受Mozilla的启发，在浏览器中显示如下图形：

虽然SVG代码乍一看似乎令人生畏，但设计和控制SVG图标看似简单易行。实际上，您可以使用Adobe Illustrator之类的程序来创建自己的矢量图形以用作图标。只需将它们保存为SVG文件，或者您可以在Illustrator界面中生成代码。您还可以将Google文档中的绘图导出为SVG文件。

图标字体仍然有用吗？

图标字体远未过时。虽然它们并不总是最有效也是最可靠的选项，但图标字体仍然相对简单且易于实现，因此许多开发人员继续使用它们。根据使用的图标数量，在旧项目中为SVG切换图标字体可能不值得。然而，SVG是未来的权威方式，因此您可以放心使用它们。

比较SVG与图标字体

为了帮助您确定选择哪种图标格式，让我们看看两个选项在不同部门中的比较方式。

1.尺寸

如果您选择内嵌SVG以添加样式，它们可以快速增加大小，并且代码可能变得非常麻烦。值得注意的是，内联SVG代码不会被用户的浏览器缓存。另一方面，可以缓存外部SVG文件。如果单个页面上有很多图标，那么图标字体可以提供比内联SVG更流畅的用户体验。当然，如果您使用预制的图标字体集，那么您可能会在未使用的图标上浪费资源。

值得注意的是，10个优化的SVG图标可能比整个图标库小得多。但是，如果您只使用所需的图标创建自己的自定义图标库，则图标库字体最终会变小。

2.表现

可以缓存图标字体，从而使它们直接从浏览器加载更快。但是，它的缺点是它们会创建一个额外的HTTP请求。另一方面，如果您正在内联SVG图标，则不需要其他HTTP请求，但浏览器无法缓存这些请求。

但是，您可以将SVG文件包含在外部文件中，从而使它们可以通过浏览器进行缓存。同样，在性能方面，速度的差异将取决于您的图标字体/ SVG的大小。尝试使用两者运行性能测试以确定哪一个加载更快。

3.灵活性

两种格式都可以使用CSS进行样式设置，但内联SVG可以为您提供更多选项，例如字形笔划和多色图标。你甚至可以有动画的网页图标。

4.浏览器支持

无论您为图标选择哪种格式，都可能需要执行一些额外步骤才能使它们与旧版浏览器兼容。由于它们已经存在更长时间，因此图标字体得到了更广泛的支持。使用IE 6或更高版本（可能包括所有人）的任何人都应该能够看到您的图标字体。如果您使用SVG，那么您可能希望包含JS polyfill以支持使用IE 8或更低版本的那些。

但是，在2018年，由于大多数用户已经远离旧版浏览器版本，无论您选择图标字体还是SVG，这都不应该是一个问题。在SVG图标和现代浏览器方面唯一缺乏支持来自IE和Edge，它们无法正确扩展SVG文件（建议使用高度，宽度等规则）。

5.可扩展性

虽然SVG和图标字体都是基于矢量的，但浏览器会将图标字体解释为文本，这意味着它们会受到抗锯齿的影响。因此，SVG往往看起来比图标字体更锐利。

6.定位

由于图标字体必须通过伪元素插入，因此定位字体图标可能会非常棘手。您可能必须考虑行高，垂直对齐和字母间距以及其他因素，以使伪元素和实际字形完美匹配。对于SVG，您只需设置大小即可。

7.可访问性

与图标字体不同，SVG具有内置的语义敏感元素，因此您不必包含任何变通方法来使屏幕阅读器可以访问您的字体。

SVG图标工具和资源

Mozilla的开发者网络有一个非常 全面的SVG教程 ，解释了如何使用内联CSS来设置图标的样式。除了Adobe Illustrator之外，还有一些工具可以帮助您实现SVG图标。IcoMoon是预制SVG和字体图标的绝佳资源，IcoMoon应用程序允许您创建自己的。如果您正在寻找开源的东西，Inkscape是一个免费的矢量绘图程序，可以导出SVG文件。Convertio等工具允许您将其他图像格式转换为SVG文件。

值得注意的是，像Illustrator和Inkscape这样的程序经常将额外的信息嵌入到您不需要的导出的SVG文件中。因此，您应该通过SVGO或SVG Minifier之类的优化工具运行SVG图标，以便在将它们添加到您的网站之前将其修剪下来。

除了上面提到的资源外，还有各种各样的图标网站，提供高质量的媒介作为付费或免费服务。查看我们的完整图标库资源指南以及有关使用glyphicon CDN提高glyphicons速度的文章。

摘要

社区中仍然存在一些争论，即图标字体是否优于SVG，反之亦然。事实是，在某些情况下，使一方或另一方“更好”的原因取决于使用它的环境。

但是，SVG往往是首选方法。它们具有更高的可扩展性，提供更好的用户体验，并得到所有主流浏览器的支持。甚至一些顶级网络性能专家也表示，在2018年，摆脱图标字体而转向支持SVG至关重要。

请在下面的评论中告诉我们您的想法。您使用的是图标字体，SVG图标还是两者的组合？