svg 中文显示为空白或方块的根本原因是 utf-8 bom 导致 xml 解析失败，需保存为 utf-8 无 bom 编码，删去 xmlns 和 xml 声明，正确设置 font-family 字体栈及服务器 mime 类型。
必须用 UTF-8 无 BOM 编码，否则 <text></text> 标签里的中文直接不渲染
为什么中文文字在 SVG 里显示为空白或方块
不是字体问题，也不是 CSS 没生效，而是 XML 解析器在读取 SVG 时遇到非法字节序列直接放弃解析整个 <text></text> 元素。BOM（Byte Order Mark）是 UTF-8 文件开头的三个隐藏字节 EF BB BF，它会让浏览器把 SVG 当作非标准 XML 处理，导致 <text></text> 内容被跳过。
- 用 VS Code、Sublime 或 Notepad++ 打开 SVG 文件 → 右下角查看编码 → 点击切换为
UTF-8（不是UTF-8 with BOM） - 保存后用命令行验证：
file -i your.svg应返回charset=utf-8，不含bom字样 - 内联 SVG 时，HTML 文件本身也必须是 UTF-8（
<meta charset="UTF-8">不可少）
font-family 声明写错也会让中文变等宽或消失
浏览器不会自动 fallback 到“微软雅黑”或“苹方”，它只按你写的顺序逐个尝试；一旦某个字体名系统里不存在，就可能退到等宽默认字体（如 monospace），看起来像乱码。
- 显式写全中文字体栈：
font-family="PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif" - 避免单写
font-family="SimSun"：Windows 10+ 已不预装该字体，现代浏览器会忽略并 fallback 到不可控字体 - 不用引号包裹单个英文名（如
font-family=sans-serif合法），但含空格或中文时必须加双引号
内联 SVG 时 xmlns 属性反而会破坏中文渲染
HTML5 中 <svg></svg> 是原生元素，不需要 xmlns="http://www.w3.org/2000/svg"。加上它不仅多余，还可能触发某些浏览器的严格 XML 解析模式，对 UTF-8 编码更敏感，轻微 BOM 或换行异常就导致整个文本节点失效。
- 从设计工具导出 SVG 后，手动删掉开头的
xmlns属性和<?xml ... ?>声明 - 保留
viewBox，删掉冗余width/height（交给 CSS 控制更稳妥） - 检查
<text></text>标签里有没有未转义的&、、<code>>—— 它们必须写成&、、<code>>
最容易被忽略的是：哪怕所有代码都对，只要服务器返回的 HTTP Content-Type 是 text/plain 或 application/octet-stream，浏览器就不会按 XML 解析 SVG，中文照样不显示。确认 Nginx/Apache 配置了 add_type image/svg+xml .svg;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
