Question

是否可以在CSS中使用内联SVG定义？

我的意思是：

.my-class {
  background-image: <svg>...</svg>;
}

Answer 1

是的，有可能。试试这个：

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

http://jsfiddle.net/6WAtQ/

（请注意，SVG内容需要进行网址转义才能生效，例如#会被%23替换。）

This works in IE 9 (which supports SVG)。数据URL也适用于旧版本的IE（有限制），但它们本身不支持SVG。

Answer 2

有点晚了，但是如果你们中的任何一个人一直在疯狂地尝试使用内联SVG作为背景，那么上面的转义建议就不会有用了。首先，它在IE中不起作用，并且根据SVG的内容，该技术会在其他浏览器中引起麻烦，例如FF。

如果你对svg进行base64编码（不是整个url，只是svg标签及其内容！），它适用于所有浏览器。这是base64中相同的jsfiddle示例：http://jsfiddle.net/vPA9z/3/

CSS现在看起来像这样：

body { background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");

请务必在转换为base64之前删除任何转义的网址。换句话说，上面的例子显示color ='＃fcc'转换为color ='％23fcc'，你应该回到＃。

base64更好用的原因是它消除了单引号和双引号以及url转义的所有问题

如果您使用JS，则可以使用window.btoa()生成base64 svg;如果它不起作用（它可能会抱怨字符串中的无效字符），您只需使用https://www.base64encode.org/。

设置div背景的示例：

var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";

html, body, #myDiv {
  width: 100%;
  height: 100%;
  margin: 0;
}

<div id="myDiv"></div>

使用JS，您可以动态生成SVG，甚至可以更改其参数。

有关使用SVG的更好文章之一是：http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

希望这有帮助

麦克

Answer 3

对于仍在苦苦挣扎的人，我设法让所有现代浏览器IE11及以上版本都能正常运行。

base64对我来说没有选择，因为我想使用SASS根据任何给定的颜色生成SVG图标。例如：@include svg_icon(heart, #FF0000);这样我就可以用任何颜色创建一个特定的图标，只需要在CSS中嵌入一次SVG形状。（使用base64，您必须将SVG嵌入到您想要使用的每种颜色中）

您需要注意三件事：

网址包含您的SVG 正如其他人所建议的那样，您需要对整个SVG字符串进行URL编码，以使其在IE11中工作。就我而言，我在fill="#00FF00"和stroke="#FF0000"等字段中省略了颜色值，并将其替换为SASS变量fill="#{$color-rgb}"，以便可以用我想要的颜色替换它们。您可以使用any online converter对字符串的其余部分进行URL编码。你最终会得到一个像这样的SVG字符串：

％3Csvg％20xmlns％3D％27http％3A％2F％2Fwww.w3.org％2F2000％2Fsvg％27％20viewBox％3D％270％200％20494.572％20494.572％27％20width％3D％27512 ％27％20height％3D％27512％27％3E％0A％20％20％3Cpath％20D％3D％27M257.063％200C127.136％200％2021.808％20105.33％2021.808％20235.266c0％2041.012 2010.535％％2079.541％ 2028.973％20113.104L3.825％20464.586c345％2012.797 2041.813％％2012.797 2015.467％％200％2029.872-4.721％2041.813-12.797v158.184z％27％20fill％3D％27＃的 {$颜色RGB} ％27％2F％3E％3C％2Fsvg％3E

在数据网址中添加UTF8帐户创建数据网址时，您需要省略字符集才能在IE11中使用。

不 background-image：url（数据：image / svg + xml; utf-8，％3Csvg％2 ....）
但是 background-image：url（数据：image / svg + xml，％3Csvg％2 ....）

USE RGB（）INSTEAD OF HEX颜色 Firefox不喜欢SVG代码中的＃。因此，您需要将RGB颜色十六进制值替换为RGB颜色。

不 fill =“＃FF0000”
但是 fill =“rgb（255,0,0）”

在我的情况下，我使用SASS将给定的十六进制转换为有效的rgb值。正如评论中指出的那样，最好也对RGB字符串进行URL编码（因此逗号变为％2C）

@mixin svg_icon($id, $color) { $color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")"; @if $id == heart { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E'); } }

我意识到这可能不是非常复杂的SVG的最佳解决方案（在这种情况下内联SVG永远不会），但对于只有几种颜色的平面图标，这真的很棒。

我能够省略一个完整的精灵位图，并在我的CSS中用内联SVG替换它，压缩后结果只有25kb左右。因此，这是限制网站必须执行的请求数量的好方法，而不会使CSS文件膨胀。

Answer 4

在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 blog post。

Answer 5

我已经分叉了一个CodePen演示，它在将内嵌SVG嵌入到CSS中时遇到了同样的问题。与SCSS一起使用的解决方案是构建一个简单的url编码函数。

可以从内置的str-slice，str-index函数创建字符串替换函数（感谢Hugo Giraudel，请参阅css-tricks。）

然后，只需使用%代码替换<，>，"，'，，%xx ：

@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中还有一个image-inline辅助函数，但由于CodePen不支持它，因此该解决方案可能很有用。

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

Answer 6

我的解决方法是https://yoksel.github.io/url-encoder/ 您只需插入svg并获取背景图片代码

Answer 7

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

当您需要根据其他需求（CSS中的背景图像或HTML中的img元素）重新使用这些svg片段时，请注意缺少的命名空间。如果没有命名空间，浏览器可能会拒绝显示SVG（无论编码为utf8还是base64）。

Answer 8

我找到了一个SVG解决方案。但它仅适用于Webkit，我只想与您分享我的解决方法。在我的示例中显示了如何使用DOM中的SVG元素作为背景通过过滤器（background-image：url（'＃glyph'）不起作用）。

此SVG图标呈现所需的功能：

使用CSS（IE和IE）将SVG滤镜效果应用于HTML元素 Edge不支持）
feImage片段加载支持（firefox没有支持）

.test {
  /*  background-image: url('#glyph');
    background-size:100% 100%;*/
    filter: url(#image); 
    height:100px;
    width:100px;
}
.test:before {
   display:block;
   content:'';
   color:transparent;
}
.test2{
  width:100px;
  height:100px;
}
.test2:before {
   display:block;
   content:'';
   color:transparent;
   filter: url(#image); 
   height:100px;
   width:100px;
}

<svg style="height:0;width:0;" version="1.1" viewbox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
     <g id="glyph">
          <path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z" fill="crimson"/>
     </g>
    <svg id="resized-glyph"  x="0%" y="0%" width="24" height="24" viewBox="0 0 100 100" class="icon shape-codepen">
      <use xlink:href="#glyph"></use>
    </svg>
     <filter id="image">
       <feImage xlink:href="#resized-glyph" x="0%" y="0%" width="100%" height="100%" result="res"/>
       <feComposite operator="over" in="res" in2="SourceGraphic"/>
    </filter>
 </defs>
</svg>
<div class="test">
</div>
<div class="test2">
</div>

另一个解决方案是使用url encode

var container = document.querySelector(".container");
var svg = document.querySelector("svg");
var svgText = (new XMLSerializer()).serializeToString(svg);
container.style.backgroundImage = `url(data:image/svg+xml;utf8,${encodeURIComponent(svgText)})`;

.container{
  height:50px;
  width:250px;
  display:block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

<svg  height="100" width="500" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
</svg>
<div class="container"></div>

Answer 9

您也可以执行以下操作：

<svg viewBox="0 0 32 32">
      <path d="M11.333 13.173c0-2.51 2.185-4.506 4.794-4.506 2.67 0 4.539 2.053 4.539 4.506 0 2.111-0.928 3.879-3.836 4.392v0.628c0 0.628-0.496 1.141-1.163 1.141s-1.163-0.513-1.163-1.141v-1.654c0-0.628 0.751-1.141 1.419-1.141 1.335 0 2.571-1.027 2.571-2.224 0-1.255-1.092-2.224-2.367-2.224-1.335 0-2.367 1.027-2.367 2.224 0 0.628-0.546 1.141-1.214 1.141s-1.214-0.513-1.214-1.141zM15.333 23.333c-0.347 0-0.679-0.143-0.936-0.404s-0.398-0.597-0.398-0.949 0.141-0.689 0.398-0.949c0.481-0.488 1.39-0.488 1.871 0 0.257 0.26 0.398 0.597 0.398 0.949s-0.141 0.689-0.398 0.949c-0.256 0.26-0.588 0.404-0.935 0.404zM16 26.951c-6.040 0-10.951-4.911-10.951-10.951s4.911-10.951 10.951-10.951c6.040 0 10.951 4.911 10.951 10.951s-4.911 10.951-10.951 10.951zM16 3.333c-6.984 0-12.667 5.683-12.667 12.667s5.683 12.667 12.667 12.667c6.984 0 12.667-5.683 12.667-12.667s-5.683-12.667-12.667-12.667z"></path>
</svg>

Answer 10

基于已经提到的 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"/>

Answer 11

如果您使用的是 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);
}

CSS中的内联SVG

11 个答案: