你可以使用url() CSS函数。

#mydiv::before {
  content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

确保您的SVG不包含任何#符号。使用像这样的编码器。

您可以添加SVG作为空的:after或:before的背景图像。

给你:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

使用一个空内容的背景蒙版图像，你可以在css中控制颜色:(不要忘记你喜欢的位置，宽度和高度)…!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';

使用CSS sprites和data uri提供了额外的有趣的好处，如快速加载和更少的请求，我们通过使用image/base64获得IE8支持:

使用SVG编写代码

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

对于IE8，更改如下:

  background-image: url(data:image/png;base64,data......);

虽然这是很多年前的事了，但我还是想分享一下。

上面的答案是正确的，您可以直接将编码后的svg字符串附加到css content属性中。对于那些与URL有任何问题的人来说，可能是由于空格和字符无效，在这种情况下，将您解码的SVG代码粘贴到: https://mothereff.in/url

使用编码后的SVG URL应该可以正常工作。 错误和正确的例子:

#incorrect::before {
  content: url(
    data:image/svg + xml,
    <svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
  );
}

#correct::before {
  content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}

我今天刚刚注意到，这里的一家报纸使用SVG直接注入到::before和::after伪元素中，为文章中突出显示的内容呈现程式化的引用。我试图通过whatcms.org找到这篇论文的CMS，但无济于事。然而，我可以说，所有者报纸-一个大型的国家，甚至国际，报纸使用CMS称为DM Polopoly。

在内容元素中输入SVG数据似乎比空白内容并使用SVG作为背景图像要费力得多。我想知道他们为什么选择这种方法——这种方法有什么好处。我在谷歌链接上看到一些人说，在伪元素上悬停时操纵SVG图像很容易…但我没有看到这种“好处”的绝佳例子。

本文提供了一种更简单的插入SVG作为内容的方法。 它使用缩放属性来调整图像的大小。