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

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

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

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

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

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

使用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，如下所示。

小心其他答案在IE中都有问题。

让我们有这种情况-按钮与前置图标。所有浏览器都能正确地处理这一点，但IE采用元素的宽度并缩放之前的内容以适应它。JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

解决方案是将size设置为element之前，并将其留在原来的位置:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

background-image + background-size解决方案也可以，但有点不方便，因为您必须指定两次相同的大小。

IE11的结果是:

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

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