百度浏览器无法正常显示SVG矢量图形怎么办？

先说一个核心判断：如果你用百度浏览器打开一个网页，发现里面的SVG图标一片空白，但Chrome或Edge上一切正常——这事儿，其实不复杂，问题大概率没出在网络或图片本身上，而是浏览器自己“偷偷”关了个功能开关。

百度浏览器不会主动告诉你它禁用了SVG解码模块。当你用引用一张矢量图时，它直接不处理，给你留个空白，也不报错。用户完全感知不到问题根源。遇到这种情况，不用急着怀疑图片被删或是服务器挂了。

启用百度浏览器的SVG解码支持

第一步：在地址栏敲下 【baidu://flags】，回车，进入实验性功能页。
第二步：按 Ctrl+F 搜索 【svg】，找到 “Enable SVG image rendering support” 选项，把它设为 Enabled。
第三步：继续搜索 【webp】，把 “Enable WebP image decoding” 也设为 Enabled。注意，这两个功能共用同一套解码通道，缺一不可——只开SVG不开WebP，一样没戏。
第四步：页面底部有个“重启浏览器”按钮，必须点。⚠️不重启，设置不生效，所有改动都是白费功夫。

修复内嵌SVG的结构兼容性

如果SVG是直接写在HTML里的，页面却依然空白，那问题八成出在语法结构上。百度浏览器，尤其是旧版，对嵌套和命名空间极度敏感，稍微不合规就静默终止渲染——根本不会告诉你哪里错了。

第一招：扁平化嵌套结构。把所有子级的标签都替换成，同时删掉这些子级上的 width、height、viewBox 属性，统一合并到最外层上。否则百度浏览器会直接跳过整个块。

第二招：清理冗余命名空间。只保留根上的 xmlns="http://www.w3.org/2000/svg"；必须删除所有 xmlns:xlink 声明，并把所有 xlink:href 改成 href。xlink 在现代标准中已经废弃，百度浏览器碰到重复声明会直接中断解析。

第三招：补全强制渲染属性。给根加上显式像素宽高，比如 width="24" height="24"；如果用CSS控制尺寸，还需要额外加 overflow: visible，否则描边、阴影或者动画偏移很可能被裁掉。

验证外链SVG的服务端配置

外链SVG（也就是 ）加载失败，十有八九不是浏览器的问题，而是服务端MIME类型没配对。

怎么判断？用Chrome打开同一个SVG链接（比如 https://example.com/logo.svg），右键→检查→Network 标签页，刷新后找到这个请求，看 Response Headers 里的 Content-Type 是不是 【image/svg+xml】。如果显示的是 text/plain 或 application/octet-stream，说明服务器没告诉浏览器“这是张图片”。

解决方法：Apache用户请在 .htaccess 中添加一行 AddType image/svg+xml svg；Nginx用户需要在 mime.types 里确认已经包含了 image/svg+xml svg 这一行。改完后记得重载配置。