使用数据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 post。

即：

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)"');"