我在CodePen演示中也遇到了将内联SVG嵌入CSS的问题。使用SCSS的解决方案是构建一个简单的url编码函数。

字符串替换函数可以从内置的str-slice, str-index函数中创建(参见css-tricks，感谢Hugo Giraudel)。

然后，用%xxcodes替换%，<，>，"，':

@function svg-inline($string){
  $result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  $result: str-replace($result, '%', '%25');
  $result: str-replace($result, '"', '%22');
  $result: str-replace($result, "'", '%27');
  $result: str-replace($result, ' ', '%20');
  $result: str-replace($result, '<', '%3C');
  $result: str-replace($result, '>', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("<svg>...</svg>");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}

Compass中还提供了一个图像内联助手函数，但由于CodePen不支持它，因此这个解决方案可能会有用。

CodePen上的演示:http://codepen.io/terabaud/details/PZdaJo/

我在CodePen演示中也遇到了将内联SVG嵌入CSS的问题。使用SCSS的解决方案是构建一个简单的url编码函数。

字符串替换函数可以从内置的str-slice, str-index函数中创建(参见css-tricks，感谢Hugo Giraudel)。

然后，用%xxcodes替换%，<，>，"，':

@function svg-inline($string){
  $result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  $result: str-replace($result, '%', '%25');
  $result: str-replace($result, '"', '%22');
  $result: str-replace($result, "'", '%27');
  $result: str-replace($result, ' ', '%20');
  $result: str-replace($result, '<', '%3C');
  $result: str-replace($result, '>', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("<svg>...</svg>");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}

Compass中还提供了一个图像内联助手函数，但由于CodePen不支持它，因此这个解决方案可能会有用。

CodePen上的演示:http://codepen.io/terabaud/details/PZdaJo/

来自第三方来源的内联SVG(如谷歌图表)可能在SVG元素中不包含XML名称空间属性(xmlns="http://www.w3.org/2000/svg")(或者可能在SVG呈现后将其删除-浏览器检查器和浏览器控制台的jQuery命令都不显示SVG元素中的名称空间)。

当您需要为其他需要(CSS中的background-image或HTML中的img元素)重新使用这些svg片段时，请注意丢失的名称空间。如果没有名称空间，浏览器可能会拒绝显示SVG(无论编码是utf8还是base64)。

基于已经提到的https://github.com/yoksel/url-encoder/所采取的方法以编程方式完成:

// Svg (string) const hexagon = ` <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1" > <stop offset="0%" stop-color="#ff0000" /> <stop offset="100%" stop-color="#ffff00" /> </linearGradient> </defs> <polygon points="0,10 5,0 95,0 100,10 95,20 5,20" fill="#eee" stroke="url(#redyel)" /> </svg> ` // svgToBackgroundImage const symbols = /[%#()<>?[\\\]^`{|}]/g; const newLine = /\r?\n/; const notEmptyString = (str) => str.length; const trim = (str) => str.trim(); const toOneLine = (str) => str.split(newLine).filter(notEmptyString).map(trim).join(" "); function addNameSpace(svgString) { if (svgString.indexOf(`http://www.w3.org/2000/svg`) < 0) { svgString = svgString.replace( /<svg/g, `<svg xmlns="http://www.w3.org/2000/svg"` ); } return svgString; } function encodeSVG(svgString) { svgString = svgString.replace(/>\s{1,}</g, `><`); svgString = svgString.replace(/\s{2,}/g, ` `); // Using encodeURIComponent() as replacement function // allows to keep result code readable return svgString.replace(symbols, encodeURIComponent); } const svgToBackgroundImage = (svgString) => `url('data:image/svg+xml,${encodeSVG(addNameSpace(toOneLine(svgString)))}')`; // DOM const element = document.querySelector("#hexagon"); element.style.backgroundImage = svgToBackgroundImage(hexagon); #hexagon { width: 100px; height: 20px; } <div id="hexagon"/>

在Mac/Linux上，你可以用这个简单的bash命令轻松地将SVG文件转换为CSS背景属性的base64编码值:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

在Mac OS X上测试。 这样还可以避免URL转义混乱。

记住，对SVG文件进行base64编码会增加其大小，请参阅css-tricks.com的博客文章。

如果你正在使用postcss，你可以尝试postcss-inline-svg插件https://www.npmjs.com/package/postcss-inline-svg

.up {
    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
}
.down {
    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);
}