浏览器复用XML解析器处理SVG，使其成为真实DOM节点，支持querySelector、CSS和JS操作；非法XML或viewBox缺失会导致静默失败。
浏览器引擎不为 SVG 单独写解析器，它直接复用 XML 解析器处理 <svg> 标签及其子元素——这意味着你写的 SVG 必须是合法 XML，否则整个块可能被静默跳过，且不报错。
SVG 是怎么进 DOM 的
当 HTML 解析器遇到 <svg> 开始标签时，会切换到 XML 模式：区分大小写、要求闭合标签（<path/> 合法，<path> 不闭合则后续解析异常）、支持命名空间。每个 <circle>、<path> 都变成真实 DOM 节点，可被 document.querySelector('svg path') 选中，也能响应事件或被 CSS 作用。
这和 <img src="logo.svg"> 完全不同：<img> 只加载二进制流，不解析内部结构，querySelector 找不到任何 <path>。
为什么内联 SVG 在 Edge 里空白却不报错
Edge 默认禁用 SVG 图像解码模块，且对嵌套结构、命名空间、id 唯一性异常敏感——它不会抛出 SyntaxError，而是直接跳过渲染整段 <svg>。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有多层嵌套
<svg>：只保留最外层，删掉所有子<svg>标签及它们的width/height/viewBox - 确认根
<svg>有且仅有xmlns="http://www.w3.org/2000/svg"；删掉所有xmlns:xlink，把xlink:href全改成href - 确保所有
id全局唯一：重复id="arrow"会让<use href="#arrow">失效，图标消失 - 加显式尺寸：
<svg width="24" height="24">；仅靠 CSS 控制宽高时，必须加style="overflow: visible"防裁剪描边或动画偏移
viewBox 不是可选项，是缩放逻辑的根基
viewBox 定义了 SVG 内部坐标系，没有它，width 和 height 就只是拉伸容器，图形会变形或裁剪。比如 viewBox="0 0 100 100" 表示“逻辑画布宽高各 100 单位”，里面 <circle cx="50" cy="50" r="20"> 就永远居中。
- 禁止写
viewBox="0 0 0 0"或含负值（如"-10 -10 100 100"），主流浏览器会静默丢弃整个<svg> - 响应式推荐写法：
<svg viewBox="0 0 100 100" style="max-width: 100%; height: auto;">，让浏览器按比例缩放内容 -
fill和stroke默认不继承父级color，要写成fill="currentColor"才能响应暗色模式或:hover变色
外链 SVG 失效？先看服务端返回的 Content-Type
Edge 对 MIME 类型校验极严：若服务器返回 Content-Type: text/plain 或空值，它直接拒绝解析，哪怕文件内容完全合法。
- 用 Chrome 打开
https://example.com/icon.svg，打开 DevTools → Network → 刷新 → 点击该请求 → 查看 Response Headers 中的Content-Type - 正确值必须是
image/svg+xml；Nginx 需加types { image/svg+xml svg; }，Apache 需确保mime.types包含对应映射 - 本地双击 HTML 文件（
file://协议）必然失败，因为无服务端协商 MIME 类型，必须走 HTTP(S) 服务
真正容易被忽略的是：XML 合法性检查发生在 DOM 构建阶段，而渲染失败往往没错误提示；只要一个 <path d="M10 10 L20"> 缺了 Y 坐标，或一个 <use href="#missing"> 引用了不存在的 id，整块 SVG 就可能变空白——查起来得从 DOM 树开始，而不是控制台报错。
