火狐浏览器无法显示svg图片，主因是缺失xmlns命名空间、width/height属性，或被csp拦截、xlink废弃、data uri编码错误及扩展干扰。需补全三项必要属性、检查控制台csp报错、改用href替代xlink:href、严格url转义data uri，并在安全模式下排查扩展。
火狐浏览器无法显示SVG格式图片，常见于网页中图标空白、内联SVG渲染成XML源码文本、或data URI加载后一片透明——这并非Firefox不支持SVG，而是它对语法规范、加载策略和安全限制比Chrome更严格，稍有偏差就直接静默失败。
检查SVG代码是否缺失关键命名空间与尺寸属性
打开你的SVG源码（无论是本地文件、内联HTML还是data URI解码后的内容），确认最外层
仅写viewBox而不设width和height，Firefox不会推导渲染尺寸，图形会坍缩为0×0；缺xmlns则直接降级为纯XML文本显示，页面上只看到一堆标签代码。
用Inkscape或Figma导出的SVG默认带这三项，但手写、代码生成或从某些图标库复制的SVG常遗漏xmlns——补上这一行就能解决八成“变XML”的问题。
验证SVG是否被Content-Security-Policy拦截
按下Ctrl+Shift+I打开开发者工具→切换到“控制台”→刷新页面→查找含“Refused to load SVG resource due to Content-Security-Policy”的报错。
若存在该报错，说明站点CSP头未允许data:协议——许多内联SVG依赖data:image/svg+xml,base64或utf8编码方式，而Firefox要求img-src指令中必须显式声明data:或'self'。
此时无法由用户端修复，需联系网站管理员，在响应头中补充：img-src 'self' data:。
排查xlink:href废弃与跨DOM引用失效
方法一：在开发者工具“元素”面板中右键可疑
重点移除 xmlns:xlink="http://www.w3.org/1999/xlink" —— Firefox 90+已废弃xlink:href，改用href；若保留xlink:href，引用将完全失效。
方法二：检查
修正data URI编码方式
第一步：将所有data:application/xml;base64,或data:image/svg+xml;base64,前缀，统一替换为data:image/svg+xml;utf8,。
第二步：对原始SVG字符串执行encodeURIComponent()，尤其注意尖括号，双引号"，空格等必须百分号转义，否则Firefox解析中断，静默不渲染。
JavaScript动态设置时，严禁直接拼接：img.src = `data:image/svg+xml;utf8,${rawSvg}`；正确写法是img.src = `data:image/svg+xml;utf8,${encodeURIComponent(rawSvg)}`。
禁用干扰扩展并进入安全模式验证
① 在地址栏输入about:support → 查看“启动参数”是否含-safe-mode；若无，手动进入安全模式（菜单 → 帮助 → 进入安全模式）。
② 安全模式下访问同一SVG页面，若图形正常显示，说明某个启用的扩展正在拦截或重写SVG资源。
广告屏蔽类（如uBlock Origin）、SVG优化类、脚本注入类扩展最常引发此问题，需逐个禁用排查。
