SVG标签能改颜色而<img src="icon.svg">不能，因为内联SVG将图形结构注入DOM，使<path>等元素可被CSS和JS直接操作；而<img>仅作为容器，SVG内容完全隔离，无法穿透样式或脚本。

为什么svg标签能改颜色而<img src="icon.svg">不能

因为svg标签把整个图形结构直接注入 DOM，<path>、<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+xml MIME 类型

svg标签支持哪些<img>做不到的交互能力

内联 svg 是真正的 DOM 成员，能绑定事件、触发动画、被 JS 动态修改属性，而 <img> 只能监听自身（比如 click），无法操作内部路径。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 支持 :hover、:focus、@keyframes 直接作用于 <path>
• 可用 querySelector 定位到具体子元素并调用 setAttribute('fill', 'blue')
• 能结合 CSS 变量或 currentColor 实现一键主题切换，比如深色模式下自动翻转图标颜色
• 可添加 <title> 和 <desc> 提升可访问性，<img> 仅靠 alt 属性无法传达图形语义

性能和加载行为差异：什么时候不该用内联svg

内联确实减少 HTTP 请求，但会拖慢 HTML 解析——尤其当图标复杂、数量多时，DOM 构建时间明显增加。

立即学习“前端免费学习笔记（深入）”；

• 首屏关键区域（如导航栏图标）避免塞入大段 SVG，15 个含 20 条 <path> 的图标可能增加 15–30KB HTML 体积
• 地图、图表级 SVG 应走 <img> 或懒加载，它们不需要交互，且体积远超图标
• 用 svgo 压缩 SVG，但别手动删 viewBox——漏掉会导致缩放异常甚至渲染失败
• 旧版 Safari（≤15.6）对 <use href="#id"> 跨文件引用支持不稳定，<symbol>+<use> 方案务必内联在同个 HTML 或单页应用入口中

<symbol>+<use>复用方案的实际约束

这是目前最推荐的图标系统架构，但不是“写完就跑”，有几个容易忽略的硬性条件。

• <symbol> 必须放在 <svg> 根标签内，且该 <svg> 不能设宽高或 display:none，否则 Safari 下 <use> 可能白屏
• <use> 的 href 值必须带 # 前缀，比如 <use href="#search">，写成 href="search" 无效
• 如果图标来自外部 SVG 文件（非内联），跨域或协议不一致（http vs https）会导致 <use> 失败，且无明确报错
• <symbol> 中不要写内联样式如 style="fill:red"，它会覆盖外部 CSS，破坏主题一致性

真正卡住项目的往往不是“能不能做”，而是“要不要让每个图标都进 DOM”。需要悬停变色、点击高亮、适配暗色模式、支持屏幕阅读器——就必须内联；只是静态装饰、背景图、loading 动画——<img> 更轻量、更稳妥。