使用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......);

使用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......);

是的，你可以!刚刚测试了这个，它工作得很好，这是了不起的!

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

或者如果你喜欢把SVG直接放在CSS中:

#测试::{之前 content: url("data:image/svg+xml，%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E "); 宽度:200 px; 身高:200 px; ｝ < div id = "测试" > < / div >

SVG URL编码器来格式化您自己的SVG，如下所示。

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

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

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

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

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