浏览器支持SVG内联渲染需满足SVGElement存在、能创建合法SVG实例且DOM可解析；IE9+支持，IE8及更早版本不支持。
如何判断浏览器是否支持 SVG 内联渲染
现代浏览器基本都支持 SVG，但「支持」不等于「能正确内联渲染」。关键要看 <svg> 元素能否被 DOM 解析、样式可控制、且图形不被降级为占位符或空白。最直接的验证方式是用 JavaScript 检测 SVGElement 构造函数是否存在，并尝试创建一个最小 SVG 实例：
if (typeof SVGElement !== 'undefined') {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
if (svg && svg.namespaceURI === 'http://www.w3.org/2000/svg') {
// ✅ 基本 SVG 支持就绪
}
}
注意：IE9+ 才有 SVGElement；IE8 及更早版本完全不识别 <svg> 标签，会当作未知 HTML 元素丢弃子内容。
内联 SVG 渲染失败的典型现象与排查点
即使浏览器声明支持 SVG，内联 SVG 仍可能不显示，常见原因包括：
-
<svg>标签未使用正确的命名空间（如写成<svg xmlns="http://www.w3.org/2000/svg">缺失或错误） - 父容器设置了
overflow: hidden且 SVG 尺寸超出，或display: none/visibility: hidden - SVG 内部引用了外部资源（如
<image xlink:href="...">），而路径 404 或跨域被拦截 - CSS 中对
svg元素设了height: 0、width: 0或font-size: 0（影响em-单位尺寸） - HTML 模板引擎（如 Vue、React）自动转义或过滤了
<svg>内容，尤其含<use>或 CDATA 片段时
SVG 内联 vs <img src="icon.svg"> 的兼容性差异
内联 SVG 提供样式控制和脚本交互能力，但代价是兼容性更敏感：
立即学习“前端免费学习笔记（深入）”；
-
<img src="icon.svg">在 IE9+、Android 4.0+、iOS 5.1+ 均可加载，但无法用 CSS 修改内部<path>颜色 - 内联 SVG 在 IE9–11 中不支持
<use>引用外部 SVG 文件（xlink:href="sprite.svg#id"），仅支持同文档内 ID 引用 - 某些旧版 WebView（如 Android 4.3 系统 WebView）解析内联 SVG 时会忽略
viewBox，导致缩放异常 - 服务端压缩工具（如 html-minifier）若未配置
caseSensitive: true，可能把<SVG>转成小写后破坏命名空间识别
快速检测页面中 SVG 是否真正生效的调试技巧
不要只看页面有没有图形，要确认它是否作为矢量 DOM 存在：
- 打开 DevTools → Elements 面板，搜索
<svg，确认节点存在且展开后可见子元素（如<path>、<circle>） - 在 Console 中执行
document.querySelector('svg').getBBox()，返回有效矩形对象说明已渲染；抛错或返回空则未就绪 - 右键 SVG 区域 → “检查元素”，如果弹出的是外层容器而非
<svg>自身，大概率被当作普通 inline 元素处理，未触发 SVG 渲染管线 - 临时加一句
svg.style.border = '1px solid red'，看边框是否套在图形上——若边框出现在左上角零点位置，说明width/height或viewBox设置失效
内联 SVG 的脆弱性往往藏在细节里：一个没闭合的 <path>、一个漏写的 xmlns、或者构建工具悄悄删掉了注释里的 XML 声明，都可能导致整块 SVG 消失无踪。
