使用数据URI SVG作为CSS背景图像

Question

背景故事:

• 目标:创建一个可以通过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>?

• 所以我尝试用我自己的三角形svg 复制上面的内容(http://jsfiddle.net/6WAtQ/),

• 我用'%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内容的结束位置.

或者,您可以使用单引号并保持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

即使它增加了实际的SVG文件大小,您也可以将base64编码用于更干净的格式.另见css-tricks.com帖子.

即:

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

您可以使用此bash命令(在MacOS 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)"');"