为何UTF-8格式的SVG Data URL中HEX十六进制颜色无法生效？

问题根本原因 #

UTF-8 格式的 SVG Data URL 中 HEX 颜色失效的核心原因是：# 是 URL 协议中的保留字符，作用是标识页面锚点。你直接将未转义的 # 放入 Data URL 中时，浏览器会把 # 之后的内容识别为锚点片段，直接截断 SVG 代码，导致 SVG 解析失败无法显示。
而 RGB 颜色写法没有用到 # 所以不受影响，Base64 编码会把所有特殊字符转成 Base64 字符集，自然也不会触发 URL 保留字符的解析逻辑，所以可以正常运行。

解决方案 #

你只需要将 HEX 颜色中的 # 转义为 URL 编码的 %23 即可正常使用，修改后的代码示例如下：

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:%2326a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'>

如果 SVG 内容中特殊字符较多，也可以对整个 SVG 字符串做 URI 编码后再放入 Data URL，示例如下：

<script>
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>`;
const encodedSvg = encodeURIComponent(svgStr);
document.querySelector('img').src = `data:image/svg+xml;utf8,${encodedSvg}`;
</script>

内容的提问来源于stack exchange，提问作者PaulCrp