CSS 内联 UTF 编码的 SVG - Safari 8.0.3 中的 404 错误答案

【问题标题】：CSS inline UTF-encoded SVG - 404 error in Safari 8.0.3CSS 内联 UTF 编码的 SVG - Safari 8.0.3 中的 404 错误
【发布时间】：2015-02-03 19:11:01
【问题描述】：

在 CSS 文档中，我使用 UTF 编码的 SVG sn-p 作为背景图像，如下所示：

body {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle fill="#529ECC" cx="8" cy="8" r="1"/></svg>');
}

SVG 图像显示正常，但是在 Safari 8.0.3 中我收到控制台错误 -

`Failed to load resource: the server responded with a status of 404 (Not Found)`

这是jsbin demo - 控制台错误仅显示在实时预览中，而不是在编辑页面中（单击输出面板上方的箭头图标）。

为什么会出现 404 错误（这不是 URL 请求而是数据字符串？），有没有办法防止呢？

更新：我在 JSBin 中包含了 URL 编码的版本，没有修复它。 Base64 编码确实停止了错误，但我想按照this 文章使用 UTF。

【问题讨论】：

标签： css svg

【解决方案1】：

数据 url 的语法不正确，必须是 url 编码（或 base64 编码）。

例如 # 是非法的，url 编码会将其转换为 %23

【讨论】：

谢谢，我尝试了 base64 编码，它停止了错误。然而，根据这篇文章css-tricks.com/probably-dont-base64-svg，将 CSS SVG 编码为 UTF 是安全且略微可取的。所以我很好奇这是否只是一个 Safari 错误？
@MachineElf 任何没有在# 字符上中断的浏览器都是一个错误（目前只有 Chrome/Opera 允许它）。如果您希望 # 成为 URL 的一部分而不是目标片段的开头，则应始终对它进行 URL 编码。特别是对于 IE，您还需要对整个字符串（空格和尖括号）进行编码。是使用 URL 编码还是 base-64 编码更多的是公开辩论。 base-64 最初较短，但 gzip 压缩后的 URL 编码可能会更小，因为有很多重复的序列。
再次感谢，我已尝试对所有和部分 UTF 字符串（例如 # chara）进行 URL 编码，但无法停止 404 错误。您可以在此处查看结果 - jsbin.com/fadihu/8/edit?css,output - Safari 8 控制台错误显示在实时预览中（输出面板上方的箭头按钮）。
可能是 Safari 错误，除非他们已经知道，否则请向 webkit 错误跟踪器报告：bugs.webkit.org