为什么火狐浏览器无法显示SVG格式的图片？

火狐浏览器上SVG图片突然显示不出来，这事儿不少前端同学都遇到过。图标区域一片空白、内联SVG渲染成一堆XML源码、或者data URI加载后直接透明——别急着怀疑Firefox对SVG的支持能力，它其实比Chrome更“较真”一点：语法规范、加载策略和安全限制，但凡有一处没到位，它就选择静默失败，连个错误提示都不给。

问题核心通常集中在几个方面：缺失xmlns命名空间、width/height属性没写对、被Content-Security-Policy拦了、xlink:href被废弃、data URI编码格式不对，或者某些浏览器扩展在捣乱。下面逐一说清楚。

检查SVG代码是否缺失关键命名空间与尺寸属性

打开SVG源码（无论是本地文件、内联HTML还是data URI解码后的内容），先确认最外层【xmlns="http://www.w3.org/2000/svg"】、width属性和height属性。

不少同学只写了viewBox，觉得Firefox会自动推导尺寸——实际上它不会，图形直接坍缩为0×0，什么都看不见。而要是缺了xmlns，整个SVG就会降级为纯XML文本显示，页面上看到的是一堆标签代码，完全不是图形。

从Inkscape或Figma导出的SVG默认会带上这三项，但手写、代码生成或从某些图标库复制的SVG却经常遗漏xmlns。补上这一行，大约能解决八成“SVG变成了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，引用会完全失效，图形自然不显示。

方法二：检查是否指向外部文件（比如/icons.svg#arrow）或者Shadow DOM内的symbol。关键点在于：【引用的或块必须与位于同一DOM树，并且已经完整加载】。跨文件或跨影子树引用，Firefox默认是不解析的。

修正data URI编码方式

第一步：把所有data:application/xml;base64,或data:image/svg+xml;base64,前缀，统一替换为data:image/svg+xml;utf8,。

第二步：对原始SVG字符串执行encodeURIComponent()。注意尖括号<、>、双引号"、空格这些字符，必须全部百分号转义，否则Firefox解析会中断，静默不渲染。

用Ja vaScript动态设置图片src时，绝对不要直接拼接：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优化类、脚本注入类扩展最容易引发这个问题。需要逐个禁用排查，找到那个“罪魁祸首”。