2019年了！让我们结束关于图标字体与SVG图标的争论吧

2025-06-09

2019年了！让我们结束关于图标字体与SVG图标的争论吧

在现代网络世界中，图标已成为 UI 设计中不可或缺的一部分。从导航菜单到社交媒体图标、符号和指示符，图标几乎在互联网上的每个网站和应用程序中都占据着重要地位，而且它的流行度短期内没有减弱的迹象。因此，每个开发人员都必须面对这个难题——他们应该使用哪一套图标？

传统上，开发人员只能依靠图像格式来满足他们的需求。但是，使用图像作为图标在渲染质量和分辨率方面性能极差。但现在开发人员有两种选择——图标字体与 SVG 图标（可缩放矢量图形）。这场争论没有减弱的迹象，正在将开发社区分裂成两派。两种图标格式的支持者争论着彼此的优缺点。然而，近年来，人们普遍同意并倾向于 SVG 图标格式。SVG 图标系统可确保更好的性能、更高的可访问性标准、高渲染质量、无与伦比的灵活性以及广泛的自定义功能。在本文中，我们将简要探讨 Web 图标的历史，以及字体图标与 SVG 图标的优缺点。

您可以选择图标字体或 SVG，但您应该确保您的设计具有响应能力，因此如果您正在寻找免费的下一代浏览器来构建、测试和调试移动网站，您可以尝试 LT 浏览器，这是一款开发友好的浏览器，您可以在其中查看您的网站在 Android 和 iOS 分辨率下的移动视图并检查其响应能力。

网络图标简史

图像时代

在图标字体与 SVG 的讨论之前，当浏览器不支持 CSS 时，图像是开发人员使用经典

标签。以下是图像图标的示例：

    <a href=”contact-us.html”>

    <img src=”mail.jpg” alt=”email” />

    </a>
Enter fullscreen mode Exit fullscreen mode

哪里出了问题？

但这种技术存在诸多缺陷。使用图像显示网页图标的最大缺点是缺乏可扩展性。PNG 和 JPEG 等图像格式在放大或缩小时，渲染质量会大幅下降。另一个主要缺点是，如果网页使用多张图片作为图标，每张图片都会触发新的 HTTP 请求，从而严重降低性能。最后，由于图像不可扩展，每个图像图标都需要针对不同屏幕尺寸提供多种分辨率格式。此外，如果图像图标具有悬停效果，则需要使用 Javascript/jQuery 单独加载用于其悬停状态的新图像。尽管使用图像作为图标仍然很常见，但这是一种糟糕的做法，必须不惜一切代价避免。

图像精灵的兴起

21 世纪初，图像精灵（Image Sprites）风靡一时。图像精灵只是将多个独立的图像组合在一起，形成一幅完整的图像。图像精灵将所有图标排列在一个 GIF 或 PNG 文件中，并作为 CSS 背景图像加载。通过调整 CSS 背景属性，可以只显示所需的图标。精灵解决了单个图像触发多个 HTTP 服务器请求的弊端，从而为 Web 字体带来了革命性的变化。这不仅节省了带宽，还提高了网站加载速度。此外，由于背景图像对文本浏览器和屏幕阅读器不可见，而不像图像那样被视为内容，因此许多可访问性问题也得到了解决。

这里我们有一个精灵图—— “last-guardian-sprites_0.png”，其中包含一些角色图标。我们不再使用 24 张单独的精灵图，而是使用这张精灵图来减少服务器请求数量和带宽。

使用 CSS，我们可以调整背景位置属性，只显示我们想要的图标，隐藏其余图标。需要注意的是，img_trans.gif只是一个小的透明图像，因为“src”属性不能为空。

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    #char1 {
     width: 75px;
     height: 75px;
     background: url([https://opengameart.org/sites/default/files/last-guardian-sprites_0.png](https://opengameart.org/sites/default/files/last-guardian-sprites_0.png)) 0 0;
    }

    #char2{  width: 75px;
     height: 75px;
     background: url([https://opengameart.org/sites/default/files/last-guardian-sprites_0.png](https://opengameart.org/sites/default/files/last-guardian-sprites_0.png)) -85px 0;
    }
    </style>
    </head>
    <body>

    <img id="char1" src="img_trans.gif" width="1" height="1"><br><br>
    <img id="char2" src="img_trans.gif" width="1" height="1">

    </body>
    </html>
Enter fullscreen mode Exit fullscreen mode

通过将背景位置设置为 0，0，并将容器的宽度和高度分别设置为 75px，我们能够显示第一个角色图标。将背景位置的值更改为 -85px 0，我们就可以显示图像精灵中的第二个图标。您可以使用Toptal Sprite Generator来生成图像精灵，这是一个实用的免费工具。

革命性的图标字体！

网络图标的下一阶段演变出现在 2012 年，以图标字体的形式出现。与图像和精灵图不同，图标字体能够完美缩放到任何分辨率，且不会降低或损失视觉质量。尽管图像精灵图是一个巨大的进步，但它仍然存在许多缺陷。如果您需要更改图标的颜色或分辨率，那就意味着需要一张全新的图像。另一方面，图标字体本质上是简单的文本。我们可以使用 CSS 样式规则轻松地更改和修改颜色、大小/分辨率，应用框阴影，应用 CSS 动画和过渡效果。以下是使用 Font Awesome 库的图标字体示例 -

  • 前往 Font Awesome 官方网站。使用 CDN 或下载库文件到你的系统上。

  • 将 Font Awesome CSS 样式表链接到您的网页。

  • 访问图标字体库页面并复制您想要使用的每个图标的类名。

 <!DOCTYPE html>
    <html>

    <head>
       <link rel="stylesheet" href="[https://use.fontawesome.com/releases/v5.7.2/css/all.css](https://use.fontawesome.com/releases/v5.7.2/css/all.css)" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
           crossorigin="anonymous">
       <style>
           body {
               background-color: rgba(66, 117, 156, 0.123);
           }

    h1, .icon-fonts {
               text-align: center;
           }

    i {
               font-size: 75px;
               display: inline-block;
               margin: 0 10px;
           }

    .fa-facebook {
               color: #3b5998;
           }

    .fa-twitter {
               color: #38A1F3;
           }

    .fa-instagram {
               background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               -webkit-background-clip: text;
               background-clip: text;
               color: transparent;
           }
       </style>
    </head>

    <body>
       <h1>ICON FONTS USING FONT AWESOME LIBRARY</h1>
       <div class="icon-fonts">
           <i class="fab fa-facebook"></i>
           <i class="fab fa-twitter"></i>
           <i class="fab fa-instagram"></i>
       </div>
    </body>

    </html>
Enter fullscreen mode Exit fullscreen mode

有很多网站提供免费的图标字体包 -

如果您想使用来自不同库的图标创建自定义图标字体包，请访问Icomoon应用页面。您可以从系统导入图标文件，或从 icomoon 库中选择图标来构建您自己的自定义图标包。这样，您只需添加项目所需的图标，而无需添加包含数千个图标的臃肿库文件。这将通过减少文件大小和服务器请求数量来提升您网站的性能。

图标字体无疑是网页图标最广泛的解决方案。然而，就像 CSS 图像精灵一样，图标字体的用户正在流失，转而使用 SVG。尽管图标字体是矢量格式，可以缩放到任何分辨率，但它们仍然存在一些缺陷。使用图标字体可能会导致生成多个服务器请求，并且在字体库加载期间还可能导致不可见的文本闪烁。如果浏览器由于某种原因无法识别图标字体，则会显示空白。这就是为什么许多开发人员更喜欢使用图标字体而不是 SVG 图标的原因。

令人眼花缭乱的 SVG 图标！

正如我在介绍中所述，SVG 代表“可缩放矢量图形”。SVG 图标的主要目的是以 XML 格式定义基于矢量的图形。SVG 图标正在逐渐成为 Web 字体和图像的新标准。SVG 并非字体或图像，而是一段 XML 代码，直接提供给浏览器，浏览器会按照预期的方式渲染它。越来越多的开发者正在抛弃图标字体，转而采用 SVG。SVG 不仅拥有无与伦比的缩放能力，能够在不降低任何质量的情况下缩放到任意大小，而且抗锯齿效果也比图标字体更好。此外，与传统的图标字体不同，您可以编辑、着色或为 SVG 图标的每个部分添加动画效果。此外，由于 SVG 图标只是一段代码，因此它们的大小远小于基于图像的 PNG JPEG 图标。尽管在文件大小方面，图标字体甚至比 SVG 更胜一筹。我将在博客的后面详细比较图标字体和 SVG 图标。

虽然使用 SVG 的方法有很多，但我们最感兴趣的是“内联 SVG”。使用内联 SVG 图标替代外部 SVG 图标的主要优势在于，它不会增加服务器请求，从而避免对网站性能产生负面影响。以下是内联 SVG 图像的示例：

<!DOCTYPE html>
<html>

<body>

   <h1>INLINE SVG</h1>

   <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
       <rect width="100%" height="100%" stroke="#9b59b6" stroke-width="5" fill="#2ecc71" />
       <circle cx="250" cy="250" r="150" fill="#f1c40f" stroke="#e74c3c" stroke-width="5" />
       <text x="250" y="250" font-size="20" text-anchor="middle" fill="black">THIS IS AN INLINE SVG</text>
       Sorry, your browser does not support inline SVG.
   </svg>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

你知道吗？User-select-none描述了一种使用 CSS 阻止文本/元素被选中的方法。它适用于所有主流浏览器，包括 IE7 及更高版本。

图标字体与 SVG 图标的比较

现在，我们的回顾就结束了。我将比较 Icon 字体和 SVG 图标。我们将通过 8 个关键指标来比较 Icon 字体和 SVG 图标。

1.文件大小

就文件大小而言，图标字体略胜 SVG 一筹。如果您使用内联 SVG 而非外部 SVG 图标文件，文件大小可能会大幅增加。主要原因是，与外部 SVG 不同，内联 SVG 不会被浏览器缓存。减小文件大小的一种方法是使用 SVG 精灵图。然而，SVG 精灵图只能使用滤镜或蒙版进行着色，而浏览器对它们的支持程度较差。对于多色图标，必须使用内联 SVG。

图标字体 vs. SVG 图标对比——文件大小：就文件大小而言，图标字体略胜 SVG。不过，文件大小的差异并不明显，可以忽略不计。

2. 可访问性

SVG 图标相较于图标字体的一大优势在于其卓越的可访问性。SVG 内置了语义元素，例如 <title> 和 <desc>，使其能够被屏幕阅读器和文本浏览器访问。与图标字体不同，SVG 被视为图像而非文本。此外，SVG 还兼容WAI-ARIA规范——aria-labelledby 属性。

图标字体与 SVG 图标的比较——可访问性：说到可访问性，SVG 显然是赢家。

3. 性能

正如我们之前讨论过的，图标字体是可以轻松缓存并提高加载速度的标准字体。然而，这种优点也有一个很大的缺点——它需要额外的 HTTP 服务器请求来缓存。另一方面，内联 SVG 的情况则相反。内联 SVG 不会发出任何额外的服务器请求，但是它不能被浏览器缓存，因为它被视为 HTML 代码块。这可以通过使用外部 SVG 文件来解决。
选择适合您的图标系统完全取决于您的需求——如果您需要一些不带多色修改和动画的图标，那么图标字体是正确的选择。但是，如果您使用大量多色且带有动画的图标，那么 SVG 应该是正确的选择。图标字体的另一个问题是它们可能会偶尔失败。加载错误会留下黑色空间，这会对页面设计产生不利影响。

图标字体与 SVG 图标的比较——性能：SVG 略有优势，因为图标字体容易偶尔出现故障。

4.可扩展性

正如我们之前所讨论的，图标字体会被浏览器视为常规字体。因此，图标字体容易受到浏览器内置的抗锯齿技术的影响，这会影响图标的视觉质量，使其变得模糊且不够锐利。另一方面，SVG 会被浏览器视为图像，因此不会对 SVG 应用任何抗锯齿规则。这确保了 SVG 在所有分辨率下都能保持清晰锐利且像素完美，不会出现任何明显的质量下降。

图标字体与 SVG 图标的比较——可扩展性：在可扩展性方面，SVG 比图标字体具有很大的优势。

5.动画

虽然与图像图标相比，图标字体允许使用标准 CSS 样式规则进行相当程度的自定义，但图标字体在灵活性方面仍然有限。CSS 样式修改仅限于单色、大小、标准变换和动画。SVG 不仅享有与图标字体相同的 CSS 控件，还拥有额外的 CSS 描边属性和滤镜。SVG 图标中的每个描边都可以独立设置动画。例如，时钟图标动画、邮件开/关动画、通知铃动画。SVG 允许修改矢量图的各个部分，以创建多色图标和图像，甚至可以为每个描边单独添加动画。

关于图标字体与 SVG 图标的判决——动画：在修改和样式控制方面，SVG 比图标字体具有更高的多功能性。

6.定位

由于图标字体是使用伪元素插入的，因此它们的定位有时颇具挑战性。您可能需要调整不同的 CSS 属性，例如字体大小 (font-size)、行高 (line-height)、字间距 (word-spacing)、字母间距 (letter-spacing) 和垂直对齐 (vertical-align)，才能将图标字体对齐到所需的位置。对于 SVG 来说，定位要简单得多。您只需指定尺寸即可。

关于图标字体与 SVG 图标的判断——定位：与图标字体相比，SVG 的定位要容易得多。

7.部署

图标字体通常被认为部署起来更快捷、更简单，无论是使用 @font-face 规则、cdn 还是 CSS 样式表。另一方面，SVG 的使用方法有很多种，例如作为常规

图像、背景图像、对象或内联 SVG。内联 SVG 是迄今为止部署 SVG 图标最流行的方式，因为它允许进行高度修改，而不会触发额外的服务器请求来降低性能。

图标字体 vs. SVG 图标——部署对比：没有明显的赢家。图标字体部署起来稍微容易一些，但 SVG 图标的可修改程度更高，性能也更好。

8.跨浏览器兼容性

在跨浏览器兼容性方面，图标字体比 SVG 具有明显的优势。图标字体完全支持所有桌面和移动浏览器，以及所有浏览器版本，包括旧版 IE6 到 IE8。而 SVG（基本支持）则支持除 IE8 及以下版本之外的所有浏览器。类似的情况也出现在一些老版本的 Android 浏览器、Firefox 和 Safari 上。

如果我们考虑大规模实现 SVG，那么跨浏览器兼容性将是一个重大挑战。例如：

→ HTML 的 SVG 效果

如果您计划利用 HTML 的 SVG 效果，那么请确保执行彻底的跨浏览器测试。

→ 同样，SVG Favicons也需要跨浏览器兼容性测试。

→ 或者，即使我们谈论SVG SMIL 动画，在众多浏览器版本中仍然存在浏览器兼容性问题。

与图标字体相比，这是使用 SVG 的一个小缺点，图标字体在所有浏览器中都享有出色的支持。此外，IE9-11 和 Microsoft Edge 有时无法以正确的方式缩放 SVG，这有点令人担忧，不过这可以通过调整一些 CSS 规则轻松解决。

对于 SVG 爱好者来说，这看起来有点吓人，也有点不幸。幸运的是，我们拥有LambdaTest 等自动化跨浏览器测试工具，它可以通过云端的 Selenium Grid 快速识别 3000 多个真实浏览器和浏览器版本上 SVG 渲染的任何异常，同时还可以通过LambdaTest云服务器托管的虚拟机，将 Web 应用加载到您所需的操作系统/浏览器配置上，进行手动实时交互测试。

图标字体 vs SVG 图标——跨浏览器兼容性：图标字体比 SVG 图标享有更广泛的跨浏览器兼容性支持。不过，你可以尝试使用必要的回退或 Polyfill 来弥补这一缺陷。

看看这个：Transforms3d - 使用 transform 属性在 3D 空间中变换设计元素。perspective 属性设置 z 空间的透视，backface-visibility 属性切换变换元素背面的显示。

如何构建您的 SVG 图标系统？

图标字体为开发人员提供了一种便捷的方法，可以在几秒钟内将任何图标添加到他们的页面。所有图标都包含在一个文件中，该文件托管在本地或 CDN 上，您可以使用相应的类或代码轻松选择要显示的任何图标。最受欢迎的图标字体库之一是 Font Awesome，我们在上一节的示例中使用了它。现在，我们希望 SVG 图标具有类似的功能，其中一个 SVG 精灵包含所有图标。要构建这样的自定义 SVG 图标系统，您首先需要选择单个图标文件或从现有的字体图标库中选择。这些文件可以是图标字体或 svg 图标。如果它们是图标字体，则您首先需要将它们转换为 SVG 图标。

步骤 1 — 将 WOFF/TTF/OTF 转换为 SVG

将 WOFF/TTF/OTF 格式的图标字体转换为 SVG 图标的最佳工具是在线字体转换工具。访问该网站并选择输出字体类型为 SVG。

现在解压 zip 文件，并将 SVG 图标（扩展名为 svg）文件放入字体文件夹中。将所有图标字体转换为 SVG 格式。

第 2 步 — 构建你的 SVG 图标系统

现在，所有图标都转为“.svg”格式后，我们就可以开始构建自定义 SVG 图标系统了。我们提供了多种工具来完成这项任务——

  1. IcoMoon 应用程序

  2. Fontastic

  3. 丰泰洛

  4. 字体爆炸

我推荐的最佳工具是 Fontastic 和 IcoMoon。Fontastic 比 IcoMoon 的优势之一是它为我们的 SVG 精灵提供了永久托管的 CDN 链接，免费账户用户也可以使用。而 IcoMoon 只提供临时的 24 小时 CDN 托管服务，永久托管服务仅供高级账户用户使用。但 IcoMoon 提供的字体库选择要丰富得多，既有自有的，也有其他流行的第三方字体库。在本博客中，我将讲解如何使用 IcoMoon 构建您的 SVG 图标系统。

现在您已准备好构建 SVG 精灵，请上传您的自定义 SVG 图标并按照以下步骤操作 -

  • 进入 IcoMoon App 页面并点击“导入图标”

  • 选择你从在线字体转换器下载的 .svg 图标文件，或任何其他 SVG 图标。选择文件并点击“生成 SVG”

  • 解压 Zip 文件后，我们需要的文件是symbol-defs.svg和svgxuse.js。

除了上传自定义字体外，您还可以使用现有库（例如 Font Awesome 和 Linea）来选择项目所需的 SVG 图标。这将有助于减小文件大小，因为您无需将整个库添加到项目中。只需前往 IcoMoon App 主页，然后选择“从库中添加图标”即可。

第 3 步 — 使用 SVG 图标系统

  • 将 SVG 图标系统与内联 SVG 结合使用。

  • 要将图标作为内联 SVG（使用元素）插入，请复制 < svg > 元素（包含符号定义），然后使用以下代码的图标 -

    <svg class="icon-twitter"><use xlink:href="#icon-twitter"></use></svg>

下面是使用我们的 SVG 图标系统的示例代码，其中包含 3 个图标 — — twitter、facebook 和 instagram 作为内联 SVG — —

`<!doctype html>
<html>

<head>
   <title>IcoMoon - Inline SVG</title>
</head>

<body>
   <!--This SVG ELEMENT CONTAINS SVG DEFINITION-->
   <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"
       xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)">
       <defs>
           <symbol id="icon-twitter" viewBox="0 0 32 32">
               <title>twitter</title>
               <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
           </symbol>
           <symbol id="icon-facebook" viewBox="0 0 32 32">
               <title>facebook</title>
               <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path>
           </symbol>
           <symbol id="icon-instagram" viewBox="0 0 32 32">
               <title>instagram</title>
               <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0zM16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331zM26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
           </symbol>
       </defs>
   </svg>

<header class="bgc1 clearfix">

<svg class="icon-twitter">
           <use xlink:href="#icon-twitter"></use>
       </svg><span class="name"> icon-twitter</span>

<svg class="icon-facebook">
           <use xlink:href="#icon-facebook"></use>
       </svg><span class="name"> icon-facebook</span>

<svg class="icon-instagram">
           <use xlink:href="#icon-instagram"></use>
       </svg><span class="name"> icon-instagram</span>

<script defer src="svgxuse.js"></script>
</body>

</html>`
Enter fullscreen mode Exit fullscreen mode
  • 将您的 SVG 图标系统与外部 SVG 一起使用。

如果您更喜欢使用外部 SVG（包含 SVG 元素）而不是在 HTML 中嵌入 SVG 定义，则需要使用“svgxuse.js”来支持 IE 9 及以上版本。对于不支持引用外部 SVG 的浏览器（例如 IE 9），此 polyfill 会发送单个 HTTP 请求来获取并缓存所有符号定义。请注意，它必须托管在 Web 服务器上才能正常工作。

`<svg class="icon-twitter">
                   <use xlink:href="symbol-defs.svg#icon-twitter"></use>
              </svg><span class="name"> </span>`
Enter fullscreen mode Exit fullscreen mode

下面是使用我们的 SVG 图标系统的示例代码，其中包含 3 个图标 — — twitter、facebook 和 instagram 作为内联 SVG — —

 <!doctype html>
    <html>

    <head>
       <title>IcoMoon - EXTERNAL SVG</title>
    </head>

    <body>

    <svg class="icon-twitter">
           <use xlink:href="symbol-defs.svg#icon-twitter"></use>
       </svg><span class="name"> </span>

    <svg class="icon-facebook">
           <use xlink:href="symbol-defs.svg#icon-facebook"></use>
       </svg><span class="name"> </span>

    <svg class="icon-instagram">
           <use xlink:href="symbol-defs.svg#icon-instagram"></use>
       </svg><span class="name"></span>

    <script defer src="svgxuse.js"></script>
       <svg class="icon-twitter">
           <use xlink:href="#icon-twitter"></use>
       </svg>

    </body>

    </html>
Enter fullscreen mode Exit fullscreen mode

步骤 4 — 如何设置 SVG 图标的样式

要设置 SVG 图标的样式，只需使用选择器 -

`[class^="icon-"]and [class*=" icon-"]to apply styling.`
Enter fullscreen mode Exit fullscreen mode 
<style>
           [class^="icon-"],
           [class*=" icon-"] {
               display: inline-block;
               width: 1em;
               height: 1em;
               stroke-width: 0;
               stroke: currentColor;
               fill: currentColor;
           }
    </style>
Enter fullscreen mode Exit fullscreen mode

需要指定 SVG 图标的宽度和高度，使其不会过大，与周围的文本和其他元素不成比例。因此，我们将宽度和高度设置为 1em，使字体大小与附近的文本大小相同。您可以根据需要为其指定任何自定义值。

你知道吗？Text-stroke声明了文本的轮廓（描边）宽度和颜色。

以上就是我的看法。你的看法呢？

关于图标字体与 SVG 图标的争论已经持续了一段时间，双方都有各自的支持者，各自宣扬各自图标系统的优点。然而，近年来，开发者社区已经出现了转向 SVG 图标的重大转变，并且这种趋势没有减弱的迹象。就浏览器支持而言，SVG 与 IE9+ 和 Android 2.3+ 的图标字体并驾齐驱，覆盖了 99% 以上的用户群，同时提供了更高的可访问性、可扩展性和控制力。

SVG 在跨浏览器兼容性方面确实存在问题。为了解决 IE6-IE8 的浏览器兼容性问题，您可以使用一些补救措施——要么使用文本或 PNG 图像形式的专用回退，要么使用 modernizr JavaScript 功能检测库，要么使用 Polyfill（例如 SVG4Everybody）在不支持的浏览器中添加类似 SVG 的功能。我将在即将发表的文章中向您展示这些补救措施。敬请期待！
哦，对了，别忘了在“图标字体 vs SVG 图标”这两个备受争议的选项中，说出您最喜欢的一个。

鏂囩珷鏉ユ簮锛�https://dev.to/lambdatest/it-s-2019-let-s-end-the-debate-on-icon-fonts-vs-svg-icons-21k
Devto 翻译
PREV
21 个最佳 JavaScript 和 CSS 库，助您开发网站
NEXT
具有跨浏览器兼容性功能检测的 CSS