为何SVG中的<text>元素在浏览器可显示但传统图片查看器不显示？

核心原因 #

1. Chrome、Firefox等浏览器的SVG渲染引擎支持完整的Web特性，包括加载外部CSS、外部Web字体、识别CSS相对单位，而Eyes of GNOME、GIMP、Inkscape这类桌面工具的SVG渲染模块仅支持SVG标准内的静态特性，不会加载任何外部资源，也不识别浏览器专属的CSS属性和相对单位。
2. 你用到的SVG中<text>元素大概率存在以下问题：样式依赖外部CSS文件、引用了未内嵌的外部字体、使用了rem/em/vw等需要浏览器上下文计算的相对单位，导致桌面渲染器无法解析文本样式，最终无法显示文本。
3. Asciinema的缩略图可以正常显示，是因为它没有使用<text>元素，所有文本内容都被提前转换为了<path>路径元素，不存在字体和样式依赖，所有SVG渲染器都可以直接识别渲染。

解决方法 #

• 方案1：文本转路径。用Inkscape打开目标SVG，全选所有文本内容，点击菜单栏「路径」→「对象转为路径」，保存后所有渲染器都可以正常显示内容。该方案兼容性最好，缺点是文本无法再二次编辑，文件体积会有所增加。
• 方案2：内嵌字体到SVG。将你用到的字体转换为base64编码，写入SVG内部的<style>标签中，仅嵌入用到的字符子集控制文件体积，避免使用外部字体链接。
• 方案3：修正样式规范。给所有<text>元素添加内联样式，直接指定font-family、font-size等属性，大小单位统一使用px，所有样式都内嵌到SVG文件内部，不要依赖外部CSS资源。

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