Using an Data URI SVG as a CSS background image

背景故事：

• 目标：创建可以通过CSS被应用，是标度独立的三角形阴影（即，向量，而不是光栅图像）
• 经过大量的研究（寿我当然愿意接受的替代品），我选择使用SVG的背景图像作为数据URI（以避免额外的HTTP请求）。
• 我知道，这可以工作： http://jsfiddle.net/6WAtQ/

当我被困在：

• 我创建了一个简单的SVG三角形，用高斯模糊效果，如果它直接写在HTML（而不是在CSS）的SVG完美的作品： http://jsfiddle.net/RAKWB/

  <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>​

• 于是，我就复制上述（ http://jsfiddle.net/6WAtQ/使用）我自己的三角形SVG，

• 我更换了井号与“23％”，但没有骰子

• 它不工作： http://jsfiddle.net/ZPWxK/1/

  body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

思考？

Answer 1:

见工作拨弄如何有双引号只是内部url()然后所有的SVG内容使用单引号？ 你需要做的是相同的。 否则，分析器不知道是哪里的URL内容结束。

或者你可以把URL中使用单引号，并保持你的SVG内容相同。

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }

Answer 2:

您也可以使用base64编码为清洁格式，即使增加实际SVG文件大小。 又见css-tricks.com岗位 。

即：

background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg==');

您可以使用此bash命令（在Mac OS X测试），以方便地生成CSS背景属性：

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"

文章来源: Using an Data URI SVG as a CSS background image