svg不显示是因为html解析器将svg标签当作普通html元素处理，而正确渲染需http://www.w3.org/2000/svg命名空间；缺失时浏览器无法识别等为svg图形，导致丢弃、特性失效或dom同步异常。
渲染器处理原生 SVG 标签时，本质是区分 HTML 和 XML 两类解析逻辑。浏览器默认用 HTML 解析器处理整个文档，但 SVG 是 XML-based 格式，必须在正确命名空间下才能被识别为可渲染的图形元素。一旦命名空间缺失、错误或冲突，渲染器就会跳过渲染、静默失败，或抛出类似 Namespace prefix xlink for href is not defined 的报错。
为什么命名空间缺失会导致 SVG 不显示
HTML 解析器遇到 <svg></svg> 标签时，会按 HTML 元素规则处理：忽略大小写、自动闭合、不校验属性合法性。而真正的 SVG 元素需要属于 http://www.w3.org/2000/svg 命名空间，否则：
- 浏览器无法将
<circle></circle>或<path></path>识别为 SVG 图形，而是当作未知 HTML 标签丢弃 - 依赖命名空间的特性（如
xlink:href、clip-path引用、<defs></defs>内部资源）全部失效 - Vue/Svelte 等框架的响应式更新可能因节点类型不匹配，导致 DOM 同步异常
静态 SVG 必须显式声明 xmlns
直接在模板中写 SVG 时，根 <svg></svg> 标签需带完整命名空间声明，不能省略：
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="blue"></circle></svg>
若使用 <image></image>、<use></use> 或引用 <clippath></clippath>，还需补充其他命名空间：
-
xmlns:xlink="http://www.w3.org/1999/xlink"（用于xlink:href） -
xmlns:ev="http://www.w3.org/2001/xml-events"（如需事件绑定）
动态创建 SVG 元素必须用 createElementNS
JavaScript 中不能用 document.createElement('circle')，否则生成的是 HTML 元素，不是 SVG 元素：
// ❌ 错误：创建的是 HTML 元素，无 SVG 行为
const circle = document.createElement('circle');
// ✅ 正确：指定 SVG 命名空间
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '20');
同理，设置属性也要注意：
-
setAttribute('xlink:href', '...')会失败 —— 应改用setAttributeNS('http://www.w3.org/1999/xlink', 'href', '...') - 所有子元素（
path、rect、g等）都必须用createElementNS创建
框架内嵌 SVG 的特殊处理
Vue3、Svelte 等现代框架对命名空间支持更严格，但容易忽略细节：
-
Vue3 模板中：即使写了
<svg></svg>，若组件被包裹在非根作用域（如v-if或异步组件），部分构建工具可能剥离xmlns；建议始终手动保留 -
Svelte 动态元素：用
<element this="svg" xmlns="http://www.w3.org/2000/svg"></element>，不能只靠父级继承 -
React JSX：不支持直接写
xmlns属性（会被忽略），需用dangerouslySetInnerHTML或第三方库如@svgr/webpack预处理
