Chrome 72 是否为 css 背景 svg 破坏了“data:image/svg+xml;utf8”？ [复制]答案

【问题标题】：Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs? [duplicate]Chrome 72 是否为 css 背景 svg 破坏了“data:image/svg+xml;utf8”？ [复制]
【发布时间】：2019-06-24 12:35:42
【问题描述】：

我的 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>')

这适用于所有浏览器，但自 chrome 72 起，此功能不再适用于 chrome。我在 background 属性中找不到任何关于 data:image 前缀的可靠文档。或来自 google 的有关此更改的更新。

我知道我可以指定 svg 的路径，但我正在使用这种技术来重现具有不同颜色的 svg，这是我需要完成的方法。

【问题讨论】：

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

标签： css xml google-chrome svg background-image

【解决方案1】：

数据 URI 不能像您的那样包含 # 个字符，您必须将它们转义为 %23。

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

【讨论】：

BINGO... 将像 '#acb' 这样的十六进制颜色编码为 '%23abc' 为 Chrome 修复了这个问题。令人沮丧，因为它适用于没有编码的 Safari。谢谢，我正在尝试恢复几年前的一些内容，这很有帮助。