Chrome 72是否断裂'；数据：image/svg+；xml；utf8'；对于css背景SVG？

我的SVG在css中指定如下：

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15"><g fill="none" fill-rule="evenodd" stroke="#00174a"><path d="M11 1l7 6.533L11.07 14M17.5 7.5H.5"/></g></svg>')

背景图像：url（'data:image/svg+xml；utf8'）

这适用于所有浏览器，但由于Chrome72，该功能不再适用于chrome。我在

background

属性中找不到任何关于

data:image

前缀的可靠文档。或者谷歌关于这一变化的最新消息

---

我知道我可以指定svg的路径，但我正在使用这种技术以不同的颜色再现svg，这是我需要实现这一点的方法。

数据URI包含像您这样的字符是无效的，您必须将它们转义为%23

---

Chrome 71和更早版本支持URI中的#，但72后的版本不支持。

请阅读以下内容：它不适用于所有浏览器。它在Firefox中从未起作用，因为它是无效的。看起来Chrome现在也在进行正确的解析，所以可能会修复更多的无效数据。我对其进行了重构，但我认为@RobertLongson是正确的。可能需要对svg进行编码，以避免使用

#

和其他特殊字符。。。将十六进制颜色（如

“#acb”

编码为

“%23abc”

修复了Chrome的这一问题。令人沮丧的是，Safari没有编码。谢谢你，我试图从几年前恢复一些内容，这很有帮助。