HTML5内联SVG无需写xmlns属性，浏览器会自动隐式绑定命名空间；但在独立.svg文件、XHTML模式、JavaScript动态创建（需用createElementNS）或XML上下文时必须声明。
HTML内联SVG要不要写 xmlns 属性
在 HTML5 文档中直接写 <svg> 标签时，xmlns 属性不是必须的——浏览器会自动识别并绑定 SVG 命名空间。省略它不会导致渲染失败，也不会报错。
但写上也完全没问题，属于“安全冗余”：不增加兼容性风险，反而对部分旧工具链（如某些构建脚本、XML 验证器）或未来可能切换的 XHTML 模式更友好。
容易踩的坑：
- 复制粘贴独立 .svg 文件里的代码到 HTML 中，顺手带上了
xmlns="http://www.w3.org/2000/svg"，以为必须留着——其实可以删，但删了也不影响 - 误以为加了
xmlns就能解决样式不生效问题（实际常是 CSS 选择器权重、继承或属性拼写错误） - 在
<template>或document.createElement('svg')中动态插入时，仍用 HTML 方式创建，结果子元素被当成普通 HTML 元素解析（这时才真正需要createElementNS）
独立 .svg 文件必须声明 xmlns
当你把 SVG 保存为 icon.svg 并通过 <img src="icon.svg"> 或直接浏览器打开时，它走的是 XML 解析流程，此时 xmlns 是强制要求。
立即学习“前端免费学习笔记（深入）”；
缺失会导致：
- 旧版 Safari 静默忽略整个内容，页面空白
- 部分服务端渲染环境（如 Node.js XML 解析器）抛出命名空间错误
- 内嵌
<use>引用或xlink:href失效（尤其在较老上下文里）
正确写法只有一种：<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> —— xmlns 必须是这个固定值，不能缩写、不能缺省、不能用变量代替。
viewBox 和 width/height 的关系经常被搞反
width 和 height 控制 SVG 在页面中占用的**CSS 布局尺寸**；viewBox 定义内部坐标系的逻辑范围（如 "0 0 100 100"），决定图形如何缩放适配。
常见错误现象：
- 图形被拉伸变形：只设了
width/height，没设viewBox，浏览器按像素硬拉伸 - 图标变小看不见：写了
viewBox="0 0 24 24"，但width和height设成100%又没给父容器定宽高，导致缩成一团 - 文字或描边异常粗细：
viewBox缩放会影响stroke-width的视觉粗细（除非加vector-effect="non-scaling-stroke"）
实用建议：图标类 SVG 推荐固定 width/height（如 24），并配 viewBox="0 0 24 24"；响应式图表类则用 width="100%" height="auto" + 合理 viewBox。
动态创建 SVG 元素必须用 createElementNS
用 JavaScript 创建 SVG 时，document.createElement('svg') 返回的是 HTML 元素，不是 SVG 元素——它的子节点（比如 circle）无法被正确识别和渲染。
正确做法是：
- 根元素：
document.createElementNS('http://www.w3.org/2000/svg', 'svg') - 子元素：
document.createElementNS('http://www.w3.org/2000/svg', 'circle') - 设置无命名空间属性（如
fill）：el.setAttribute('fill', 'red')或el.setAttributeNS(null, 'fill', 'red') - 设置带命名空间属性（如
xlink:href）：el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#myPath')
漏掉 createElementNS 是最隐蔽的 bug 来源之一：代码看似执行无报错，但 SVG 就是不显示，排查时容易陷入样式或路径逻辑的误区。
