如何将 SVG 与 :before 或 :after 伪元素一起使用？

在开发网站过程中，我们常常会用到 :before 或 :after 伪元素去实现一些特效，同时，为了使网站更加生动，我们也需要加入一些图形元素，比如使用 SVG 图标。那么问题来了，如何将 SVG 与 :before 或 :after 伪元素一起使用呢？下面将为你详细介绍。

使用 base64 编码

一个直接的方法就是将 SVG 图片编码成 base64 格式，然后作为伪元素的 content 属性的值。这样做的好处是可以避免 HTTP 请求，从而加快页面的加载速度。

步骤一：将 SVG 图片保存为文本文件

将 SVG 图片保存为文本文件，并命名为 svg.txt。

步骤二：使用在线工具将 SVG 图片转成 base64 编码

• 打开 Convert SVG to Base64 - Online SVG Tools 网站
• 在 Convert SVG to Base64 栏中，点击 Choose Files 按钮，选择刚才保存的 svg.txt 文件。
• 点击 Convert to Base64 按钮，将 SVG 图片转成 base64 编码。

步骤三：在 CSS 中使用 base64 编码

.icon:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia" /* base64 编码 */ );
}

使用 <object> 标签

使用 <object> 标签可以将 SVG 文件作为独立对象引入到 HTML 页面中。然后，使用 :before 或 :after 伪元素来展示 SVG 图标即可。

.icon:before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M297.1 8.3l-58.2 ..."/* SVG 图片的 URL */ ) no-repeat center center;
}

<div class="icon"></div>
<object type="image/svg+xml" data="icon.svg"></object>

以上代码中，object 标签引用的是 icon.svg 文件，然后在 CSS 中，使用 :before 伪元素添加了一个空块，在背景中展示 SVG 图标。

使用 <svg> 标签

借助 <svg> 标签与 <use> 标签的组合，可以非常方便的将 SVG 图标嵌入到 HTML 页面中。

步骤一：将 SVG 图标保存为文件

将需要展示的 SVG 图标保存到本地，例如保存为 svg/sprite.svg 文件。

步骤二：在 HTML 中添加 <svg> 标签

在页面中添加一个 <svg> 标签，定义 SVG 图标的大小等信息。

<svg class="svg-icon" width="24" height="24">
  <use xlink:href="svg/sprite.svg#icon-add"></use>
</svg>

步骤三：在 CSS 中设置样式

在 CSS 样式文件中，对 <svg> 标签设置一些样式，比如设置填充颜色、边框样式等，然后隐藏图标内容。

.svg-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: #333;
  stroke: #333;
  stroke-width: 0;
  display: inline-block;
  overflow: hidden;
}

.svg-icon use {
  pointer-events: none;
}

以上代码中，我们对 <svg> 标签设置了一些基本样式，然后在其子元素 <use> 中设置图标的引用信息，这里的 xlink:href 属性用来指定需要展示的 SVG 图标。

使用 <svg> 标签与 <use> 标签的优势是可以将多个 SVG 图标合并成一个文件，在页面加载时只需要加载一次，提高了页面的加载速度。

总结

通过以上介绍，我们可以看到，将 SVG 图标与 :before 或 :after 伪元素一起使用的方法其实也不难，可以使用 base64 编码、<object> 标签以及 <svg> 标签的方式来实现。当然，每种方法都有其适用的场景和优缺点，需要根据具体情况来选择。