内联SVG支持DOM操作、CSS控制和无障碍访问，而<img>引入的SVG是黑盒，无法样式干预、JS操作或语义化；现代HTML5中<svg>标签可省略xmlns属性。
svg 标签是 HTML5 中原生支持的容器元素，用于直接嵌入可缩放矢量图形（SVG）代码。它不是图片引用标签，而是真正的 DOM 元素——每个子元素（如 circle、path、text）都可被 JavaScript 操作、CSS 选中、屏幕阅读器解析。
为什么不能只用 <img src="icon.svg">？
用 <img> 加载 SVG 确实简单，但会带来三个硬限制：
-
<img>中的 SVG 是“黑盒”，无法用 CSS 修改内部颜色、大小或动画属性（比如改fill或 hover 变色） - 无法通过 JS 获取或操作其中的
path、g等节点（document.querySelector('img').contentDocument在跨域或某些浏览器下不可靠） - 失去语义化和无障碍支持——
<img>需手动加alt，而内联svg可嵌入<title>和<desc>标签供读屏软件识别
svg 标签必须带 xmlns 属性吗？
在 text/html（即普通 HTML 页面）中，现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge 12+）会自动补全命名空间，所以以下写法完全合法且推荐：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
但如果你在 XHTML（application/xhtml+xml）环境或需要严格 XML 兼容性时，就必须显式声明：xmlns="http://www.w3.org/2000/svg"。日常开发中几乎不用加。
常见错误：内联 SVG 渲染异常或不显示
多数问题出在尺寸控制和坐标系理解偏差，而不是语法错误：
立即学习“前端免费学习笔记（深入）”；
- 没设
width和height，且内部图形也无绝对定位——结果可能渲染为 0×0 像素（尤其当只用viewBox时） -
viewBox值写反了顺序，例如viewBox="0 0 100 50"表示“把宽 100、高 50 的逻辑画布缩放到容器尺寸”，若容器没设宽高，它就塌陷 - 混用 CSS
width/height和 SVG 原生属性——优先级不同，容易导致拉伸变形；建议统一用 CSS 控制容器尺寸，用viewBox控制比例 - 在 Flex/Grid 容器里忘了给
svg设flex-shrink: 0或min-width: 0，导致被压缩成一条线
viewBox 和 CSS 尺寸的配合逻辑——它不像图片那样“填满就行”，而是定义了一套独立坐标系统。一旦图形位置偏移或比例失配，整个视觉就会错位，而且不容易一眼看出来。 
