svg标签能改颜色而不能，因为内联svg将图形结构注入dom，使等元素可被css和js直接操作；而仅作为容器，svg内容完全隔离，无法穿透样式或脚本。
为什么svg标签能改颜色而<img src="icon.svg">不能
因为svg标签把整个图形结构直接注入 DOM，<path></path>、<circle></circle>这些元素都变成可选中节点；而<img>只是个容器，SVG 内容完全隔离在外部资源里，CSS 和 JS 都穿不透。
常见错误现象包括：svg.icon:hover path { fill: red } 在 <img> 场景下完全无效；document.querySelector("svg path") 返回 null；暗色模式下硬编码的 fill="#000" 无法响应主题切换。
- 必须用
fill="currentColor"才能让 CSS 的color层级控制生效 -
<img>引入时，浏览器不会解析 SVG 内部结构，连title或desc都不可读，对屏幕阅读器不友好 - 本地双击打开 HTML 文件时，
<img src="x.svg">很可能白屏——因为没 HTTP 服务，服务器没返回image/svg+xmlMIME 类型
svg标签支持哪些<img>做不到的交互能力
内联 svg 是真正的 DOM 成员，能绑定事件、触发动画、被 JS 动态修改属性，而 <img> 只能监听自身（比如 click），无法操作内部路径。
- 支持
:hover、:focus、@keyframes直接作用于<path></path> - 可用
querySelector定位到具体子元素并调用setAttribute('fill', 'blue') - 能结合 CSS 变量或
currentColor实现一键主题切换，比如深色模式下自动翻转图标颜色 - 可添加
<title></title>和<desc></desc>提升可访问性，<img>仅靠alt属性无法传达图形语义
性能和加载行为差异：什么时候不该用内联svg
内联确实减少 HTTP 请求，但会拖慢 HTML 解析——尤其当图标复杂、数量多时，DOM 构建时间明显增加。
- 首屏关键区域（如导航栏图标）避免塞入大段 SVG，15 个含 20 条
<path></path>的图标可能增加 15–30KB HTML 体积 - 地图、图表级 SVG 应走
<img>或懒加载，它们不需要交互，且体积远超图标 - 用
svgo压缩 SVG，但别手动删viewBox——漏掉会导致缩放异常甚至渲染失败 - 旧版 Safari（≤15.6）对
<use href="#id"></use>跨文件引用支持不稳定，<symbol>+<use></use></symbol>方案务必内联在同个 HTML 或单页应用入口中
<symbol>+<use></use></symbol>复用方案的实际约束
这是目前最推荐的图标系统架构，但不是“写完就跑”，有几个容易忽略的硬性条件。
-
<symbol></symbol>必须放在<svg></svg>根标签内，且该<svg></svg>不能设宽高或 display:none，否则 Safari 下<use></use>可能白屏 -
<use></use>的href值必须带#前缀，比如<use href="#search"></use>，写成href="search"无效 - 如果图标来自外部 SVG 文件（非内联），跨域或协议不一致（http vs https）会导致
<use></use>失败，且无明确报错 -
<symbol></symbol>中不要写内联样式如style="fill:red"，它会覆盖外部 CSS，破坏主题一致性
<img> 更轻量、更稳妥。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
