Vue.js 渲染器通过自动注入 SVG 命名空间、走专用属性设置逻辑、保留原始大小写、识别自闭合标签四方面机制，确保 SVG 元素正确解析与挂载。
Vue.js 渲染器对 SVG 标签的 VNode 并不会当作普通 HTML 元素处理，而是通过一系列专门判断和路径绕过标准 DOM 操作逻辑，确保 SVG 特性（如命名空间、大小写敏感属性、自闭合行为）被正确解析与挂载。
SVG 命名空间的自动注入
当渲染器遇到以 svg 为根标签或其子树中存在已知 SVG 元素（如 circle、path、g 等）时，会主动为该 VNode 设置 ns: Namespace.SVG。这个命名空间会在创建真实 DOM 节点时传给 document.createElementNS('http://www.w3.org/2000/svg', tagName)，而非 createElement。即使用户手动写 <div><svg><circle></circle></svg></div>，内部也会逐层继承命名空间，保证所有后代 SVG 元素都处于正确上下文。
属性设置走 SVG 专用逻辑
普通 HTML 元素的属性（如 class、style、id）在 SVG 中大多仍可用，但部分属性必须用 setAttribute 而非直接赋值（例如 viewBox、fill、stroke-width）。Vue 渲染器在 patchProps 阶段检测到节点属于 SVG 命名空间后，会跳过 DOM property 映射表（如 el.value = value），统一走 el.setAttribute(key, value) 或 el.setAttributeNS(null, key, value)。对于布尔属性（如 hidden），也按 SVG 规范处理——不写值或设为空字符串即生效，而非依赖 DOM property 的 true/false。
标签名与属性名保持原始大小写
HTML 解析器会把标签和属性名转为小写，但 SVG 是 XML 类型，严格区分大小写。Vue 在生成 VNode 时保留模板中原始拼写：<linearGradient> 不会变成 <lineargradient>；gradientUnits 不会转成 gradientunits。渲染器在创建元素和设置属性时均使用原始字符串，避免因大小写归一化导致 SVG 渲染失败（例如 clipPath 写成 clippath 将无法被识别）。
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
立即学习“前端免费学习笔记（深入）”；
自闭合标签无需显式闭合
像 <circle cx="10" cy="10" r="5"/> 这类自闭合 SVG 标签，在 Vue 模板中可直接书写，无需补全 </circle>。渲染器在编译阶段就识别出 SVG 自闭合元素列表（包括 area、base、br、col、embed、hr、img、input、link、meta、param、path、source、track、wbr 等），并在生成 VNode 时标记 isSelfClosing: true，跳过子节点挂载流程，防止误渲染空文本节点或报错。
这些机制共同保障了 Vue 应用中 SVG 图形的语义准确性和运行时稳定性，不需要开发者额外封装或手动操作命名空间。
