在“数据：”URI 中转义 SVG 的正确方法？答案

【问题标题】：Correct way to escape SVG in `data:` URIs?在“数据：”URI 中转义 SVG 的正确方法？
【发布时间】：2017-06-15 14:51:39
【问题描述】：

我维护的应用程序严重依赖数据 URI (data:image/svg+xml;utf8,<svg>......) 中的 SVG 图像。使用 data: URI 而不是传统的图像或 SVG 标记的原因是 SVG 是在运行时从较大的 JSON 文档中的 SVG 属性加载的。

在 Chrome 60 中进行此更改后，是否可以在 data: URL 中使用 SVG？如果没有，我有什么替代方案？

更新：用户 Álvaro González 建议使用 encodeURIComponent，这确实可以消除弃用警告。

【问题讨论】：

【解决方案1】：

数据 URI 仍然是一个 URI，所以 encodeURIComponent() 应该是正确的工具：

encodeURIComponent() 函数编码统一资源 Identifier (URI) 组件通过替换某些实例的每个实例由一个、两个、三个或四个转义序列表示的字符字符的 UTF-8 编码（只会是四个转义由两个“代理”字符组成的字符序列）。

不要忘记将其应用于图像数据，而不是整个 URI。

如果在 CSS 中使用 URI，这就是您所需要的。如果你想在 HTML 中注入它，你还应该在上面应用 HTML 编码（这次是完整的 URI）。

【讨论】：

【解决方案2】：

encodeURIComponent() 完成了这项工作，但逃脱的次数超出了它的需要。这是一篇博客文章，详细介绍了似乎最有效的方法，例如最小化转义序列和修复使用双引号等问题，而单引号会更有效：

它包括一个为 CSS 编码 SVG 的工具，可以在本地或在线使用。这是另一个在线工具：

【讨论】：