Css 加载更复杂的SVG作为背景图像

我有一个带有SVG背景图像的输入字段。这就像一个符咒，图像显示：

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%239a5371"><path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"></path></svg>');

backgroundimage:url（'data:image/svg+xml；utf8'）；

但这不起作用：

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px"><g transform="translate(0.5, 0.5)"> <path stroke-linejoin="round" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M24,2L24,2 c-5.5,0-10,4.5-10,10v6h20v-6C34,6.5,29.5,2,24,2z"></path> <rect stroke-linejoin="round" x="8" y="18" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" width="32" height="28"></rect> <circle stroke-linejoin="round" data-color="color-2" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" cx="24" cy="30" r="4"></circle> <line stroke-linejoin="round" data-color="color-2" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="24" y1="34" x2="24" y2="38"></line> </g></svg>');

backgroundimage:url（'data:image/svg+xml；utf8'）；

第二个比较复杂，但没那么复杂，嗯？有人能告诉我为什么没有加载吗？（firebug表示无法加载图像）

---

编辑：对不起，我太笨了，这是十六进制颜色。现在它使用的是“%239a5371”而不是“#9a5371”。

此外，要在IE上实现这一点，您可能需要对svg进行URL编码。好处是URL编码的SVG字符串可以在任何地方工作，而不仅仅是重复的