xml字符串需先utf-8编码为bytes再base64编码，且data uri必须用data:image/svg+xml;charset=utf-8;base64,格式，否则浏览器无法正确解析svg。
XML字符串直接转Base64编码会出错？
直接对SVG XML字符串（含<?xml 声明、缩进、换行）调用btoa或Python的base64.b64encode，大概率报错或生成无效Data URI。因为XML里可能含UTF-8多字节字符，而btoa只接受Latin-1字节流；Python默认编码为UTF-8，但base64模块操作的是bytes，不处理编码转换。
- 浏览器端必须先用
encodeURIComponent或TextEncoder转成字节再base64，不能裸传字符串 - Node.js或Python中，要显式用
utf-8编码成bytes，再base64 —— 忘记这步，生成的Data URI打开就是空白或解析失败 - 常见错误现象：
Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range
SVG Data URI的MIME类型和参数必须严格匹配
写成data:image/svg+xml;base64,...看似正确，但实际加载失败常因MIME类型不兼容。现代浏览器要求SVG Data URI必须带charset=utf-8，否则部分中文或特殊符号会乱码甚至拒载。
- 正确格式：
data:image/svg+xml;charset=utf-8;base64,...（注意charset=utf-8在base64前） - 不要用
application/xml或text/xml—— 浏览器不认，图片不渲染 - 如果SVG含
<?xml version="1.0" encoding="UTF-8"?>，可删掉这行，它对Data URI无意义，反而增加base64体积
Python里用base64.b64encode生成Data URI的三步
关键不是“怎么编码”，而是“怎么编码才被浏览器当SVG图片”。漏掉任意一步，<img src="data:...">就挂。
- 读取SVG内容时用
encoding="utf-8"，确保字符串是Unicode - 用
.encode("utf-8")转为bytes（不是str.encode()默认可能错） - 用
base64.b64encode(...).decode("ascii")得到base64字符串，拼上前缀
svg_content = open("icon.svg", encoding="utf-8").read()
b64_data = base64.b64encode(svg_content.encode("utf-8")).decode("ascii")
data_uri = f"data:image/svg+xml;charset=utf-8;base64,{b64_data}"
浏览器里用TextEncoder安全生成Data URI
btoa已过时且不支持UTF-8，TextEncoder才是当前标准解法。它把字符串可靠转为Uint8Array，再喂给btoa或现代Base64 API。
- 别用
btoa(unescape(encodeURIComponent(svgStr)))这种老套路 —— 多余转义易破坏XML结构（如&变&） - 推荐用
TextEncoder+String.fromCharCode+btoa组合，或直接用atob反向验证时更稳 - 如果SVG含
<style></style>或CDATA，确保原始字符串未被HTML解析器提前转义（比如从innerHTML取值时要小心）
真正容易被忽略的是：Data URI长度超2MB时，某些浏览器（尤其是旧版Safari）会静默截断——这不是编码问题，是载体限制。需要拆分或改用外部引用。
