blocks|key|561281|text|在Mac/Linux上，您可以使用以下简单的bash命令轻松地将SVG文件转换为CSS背景属性的base64编码值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|561282|echo+"background:+transparent+url('data:image/svg%2Bxml;base64,"$(openssl+base64+<+path/to/file.svg)"')+no-repeat+center+center;"|code-block|syntax|javascript|561283|在Mac上测试。这样也可以避免URL转义的混乱。|561284|请记住，对SVG文件进行base64编码会增加其大小，请参阅css-tricks.com+blog+post。|offset|length|561285|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/probably-dont-base64-svg/^0|0|0|0|U|O|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>On Mac/Linux, you can easily convert a SVG file to a base64 encoded value for CSS background attribute with this simple bash command:</p>

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

<p>Tested on Mac OS X.
This way you also avoid the URL escaping mess.</p>

<p>Remember that base64 encoding an SVG file increase its size, see <a href="https://css-tricks.com/probably-dont-base64-svg/" rel="noreferrer">css-tricks.com blog post</a>.</p>


blocks|key|345588|text|我的解决方案是https://yoksel.github.io/url-encoder/，你只需插入你的svg，然后得到背景图像代码|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345589|entityMap|0|LINK|mutability|MUTABLE|url|https://yoksel.github.io/url-encoder/^0|7|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>My solution was <a href="https://yoksel.github.io/url-encoder/" rel="noreferrer">https://yoksel.github.io/url-encoder/</a>
You just simply insert your svg and getting back background-image code</p>


blocks|key|561412|text|我已经派生了一个CodePen演示，它在将内联SVG嵌入到CSS时遇到了同样的问题。使用SCSS的一个解决方案是构建一个简单的url编码函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|561413|字符串替换函数可以从内置的字符串切片、字符串索引函数创建(多亏了Hugo+Giraudel，请参阅css-tricks+)。|offset|length|561414|然后，只需将%25、<、>、"、'替换为%25xx代码：|style|CODE|561415|@function+svg-inline($string){
++$result:+str-replace($string,+"<svg",+"<svg+xmlns='http://www.w3.org/2000/svg'");
++$result:+str-replace($result,+'%25',+'%2525');
++$result:+str-replace($result,+'"',+'%2522');
++$result:+str-replace($result,+"'",+'%2527');
++$result:+str-replace($result,+'+',+'%2520');
++$result:+str-replace($result,+'<',+'%253C');
++$result:+str-replace($result,+'>',+'%253E');
++@return+"data:image/svg%2Bxml;utf8,"+%2B+$result;
}

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

html+{
++height:+100vh;
++background:+url($mySVG)+50%25+no-repeat;
}|code-block|syntax|javascript|561416|Compass中还提供了一个image-inline辅助函数，但由于CodePen中不支持该函数，因此此解决方案可能会有用。|561417|CodePen上的演示：http://codepen.io/terabaud/details/PZdaJo/|561418|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/sass/str-replace-function/|1|http://compass-style.org/reference/compass/helpers/inline-data/|2|http://codepen.io/terabaud/details/PZdaJo/^0|0|1D|A|0|0|6|1|8|1|A|1|C|1|E|1|I|3|0|0|E|C|E|C|1|0|C|16|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@$D|1A|E|1B|H|I]|$D|1C|E|1D|H|I]|$D|1E|E|1F|H|I]|$D|1G|E|1H|H|I]|$D|1I|E|1J|H|I]|$D|1K|E|1L|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1N|8|@$D|1O|E|1P|H|I]]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|Q|3|R|5|6|7|1T|8|@]|9|@$D|1U|E|1V|1|1W]]|A|$]]|$1|S|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

<p>I've forked a CodePen demo that had the same problem with embedding inline SVG into CSS. A solution that works with SCSS is to build a simple url-encoding function.</p>

<p>A string replacement function can be created from the built-in str-slice, str-index functions (see <a href="https://css-tricks.com/snippets/sass/str-replace-function/" rel="noreferrer">css-tricks</a>, thanks to Hugo Giraudel).</p>

<p>Then, just replace <code>%</code>,<code>&lt;</code>,<code>&gt;</code>,<code>"</code>,<code>'</code>,<code></code> with the <code>%xx</code>codes:</p>

<pre><code>@function svg-inline($string){
  $result: str-replace($string, "&lt;svg", "&lt;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, '&lt;', '%3C');
  $result: str-replace($result, '&gt;', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("&lt;svg&gt;...&lt;/svg&gt;");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}
</code></pre>

<p>There is also a <a href="http://compass-style.org/reference/compass/helpers/inline-data/" rel="noreferrer"><code>image-inline</code></a> helper function available in Compass, but since it is not supported in CodePen, this solution might probably be useful.</p>

<p>Demo on CodePen: <a href="http://codepen.io/terabaud/details/PZdaJo/" rel="noreferrer">http://codepen.io/terabaud/details/PZdaJo/</a></p>


blocks|key|345458|text|来自第三方来源的内联SVG+(如Google+charts)可能不会在SVG元素中包含XML命名空间属性(xmlns="http://www.w3.org/2000/svg")+(或者可能在SVG呈现后将其删除-浏览器检查器或浏览器控制台中的jQuery命令都不会在SVG元素中显示命名空间)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|345459|当您需要重用这些svg片段以满足其他需求(+CSS中的背景图像或HTML中的img元素)时，请注意缺少的名称空间。如果没有名称空间，浏览器可能会拒绝显示SVG+(不管编码是utf8还是base64)。|345460|entityMap^0|1H|Y|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>Inline SVG coming from 3rd party sources (like Google charts) may not contain XML namespace attribute (<code>xmlns="http://www.w3.org/2000/svg"</code>) in SVG element (or maybe it's removed once SVG is rendered - neither browser inspector nor jQuery commands from browser console show the namespace in SVG element). </p>

<p>When you need to re-purpose these svg snippets for your other needs (background-image in CSS or img element in HTML) watch out for the missing namespace. Without the namespace browsers may refuse to display SVG (regardless of the encoding utf8 or base64).</p>


blocks|key|345610|text|基于前面提到的https://github.com/yoksel/url-encoder/所采用的方法，以编程方式完成：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345611|​|345612|//+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%25"+stop-color="#ff0000"+/>
++++++<stop+offset="100%25"+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+=+/[%25#()<>?[\\\]%5E`{%7C}]/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%2Bxml,${encodeSVG(addNameSpace(toOneLine(svgString)))}')`;

//+DOM

const+element+=+document.querySelector("#hexagon");
element.style.backgroundImage+=+svgToBackgroundImage(hexagon);|code-block|syntax|javascript|345613|#hexagon+{
++width:+100px;
++height:+20px;
}|345614|<div+id="hexagon"/>|345615|345616|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/yoksel/url-encoder/^0|7|12|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Done programatically based on the approach taken by the already mentioned <a href="https://github.com/yoksel/url-encoder/" rel="nofollow noreferrer">https://github.com/yoksel/url-encoder/</a> :</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Svg (string)

const hexagon = `
&lt;svg
width="100"
height="20"
viewBox="0 0 100 20"
xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;defs&gt;
    &lt;linearGradient
      id="redyel"
      gradientUnits="objectBoundingBox"
      x1="0"
      y1="0"
      x2="1"
      y2="1"
    &gt;
      &lt;stop offset="0%" stop-color="#ff0000" /&gt;
      &lt;stop offset="100%" stop-color="#ffff00" /&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;polygon
    points="0,10 5,0 95,0 100,10 95,20 5,20"
    fill="#eee"
    stroke="url(#redyel)"
  /&gt;
&lt;/svg&gt;
`

// svgToBackgroundImage

const symbols = /[%#()&lt;&gt;?[\\\]^`{|}]/g;

const newLine = /\r?\n/;

const notEmptyString = (str) =&gt; str.length;
const trim = (str) =&gt; str.trim();

const toOneLine = (str) =&gt;
  str.split(newLine).filter(notEmptyString).map(trim).join(" ");

function addNameSpace(svgString) {
  if (svgString.indexOf(`http://www.w3.org/2000/svg`) &lt; 0) {
    svgString = svgString.replace(
      /&lt;svg/g,
      `&lt;svg xmlns="http://www.w3.org/2000/svg"`
    );
  }

  return svgString;
}

function encodeSVG(svgString) {
  svgString = svgString.replace(/&gt;\s{1,}&lt;/g, `&gt;&lt;`);
  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) =&gt;
  `url('data:image/svg+xml,${encodeSVG(addNameSpace(toOneLine(svgString)))}')`;

// DOM

const element = document.querySelector("#hexagon");
element.style.backgroundImage = svgToBackgroundImage(hexagon);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#hexagon {
  width: 100px;
  height: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hexagon"/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|345632|text|如果你使用的是postcss，你可以试试postcss-inline-svg插件https://www.npmjs.com/package/postcss-inline-svg|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|345633|.up+{
++++background:+svg-load('img/arrow-up.svg',+fill:+#000,+stroke:+#fff);
}
.down+{
++++background:+svg-load('img/arrow-down.svg',+fill=#000,+stroke=#fff);
}|code-block|syntax|javascript|345634|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/postcss-inline-svg^0|K|I|14|1C|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>If you're using postcss you can try the <code>postcss-inline-svg</code> plugin <a href="https://www.npmjs.com/package/postcss-inline-svg" rel="nofollow noreferrer">https://www.npmjs.com/package/postcss-inline-svg</a></p>
<pre class="lang-css prettyprint-override"><code>.up {
    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
}
.down {
    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);
}
</code></pre>


blocks|key|345551|text|你也可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345552|​|345553|<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>|code-block|syntax|javascript|345554|345555|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can also just do this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;svg viewBox="0 0 32 32"&gt;
      &lt;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"&gt;&lt;/path&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to use an inline SVG definition in CSS?</p>

<p>I mean something like:</p>

<pre><code>.my-class {
  background-image: &lt;svg&gt;...&lt;/svg&gt;;
}
</code></pre>


Inline SVG in CSS

可以在CSS中使用内联SVG定义吗？我的意思是这样的：.my-class {  background-image: <svg>...</svg>;}

问CSS中的内联SVG
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的内联SVGEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的内联SVG
EN