内联SVG是唯一能通过CSS控制颜色的嵌入方式；<img src="icon.svg">无法改色，因其将SVG作为黑盒图片处理，DOM中无路径节点，fill/stroke等CSS属性完全无效。
内联 SVG（<svg>）是唯一能兼顾样式控制、交互能力与加载性能的嵌入方式；其他方法要么锁死样式，要么增加请求，要么引入兼容风险。
为什么<img src="icon.svg">改不了颜色
因为 SVG 在 <img> 里是“黑盒”，浏览器只把它当一张图渲染，DOM 树里根本找不到 <path> 或 <circle>。CSS 的 fill、stroke 对它完全无效，JS 也查不到内部节点。
- 想换色？只能准备多份不同颜色的 .svg 文件，或改用内联
- 想加
:hover动画？不行，伪类作用不到内部元素上 - 本地双击打开 HTML 会失败——缺少
image/svg+xmlMIME 类型，必须走 HTTP 服务 - 部分旧 Android WebView 渲染异常，建议加
loading="lazy"缓解
<svg> 必须带 viewBox，否则缩放必出问题
viewBox 不是可选项，它是 SVG 坐标系的锚点。没它，width/height 就失去比例依据，图形要么拉伸变形，要么只显示一角。
- 写法必须是
viewBox="0 0 24 24"这种四元组，顺序不能错：min-x min-y width height - 内部所有
cx、cy、x、y都基于这个逻辑坐标系，不是像素值 - 删掉导出 SVG 时自带的
width和height属性，只留viewBox+ 外层 CSS 或 HTML 属性控制尺寸 - 避免
overflow="hidden"——缩放时图形会被意外裁切
怎么让 SVG 图标自动跟随文字颜色
把 fill="currentColor" 写进 <path> 或 <circle> 里，而不是写死 #333 或 red。这样只要父元素或 <svg> 自身设了 color，图标就同步变色。
立即学习“前端免费学习笔记（深入）”；
<svg class="icon" style="color: #007bff"><path fill="currentColor" d="..."></path></svg>- 配合 CSS：
.icon:hover { color: #dc3545; }，无需重复写 fill 规则 - 删掉原始 SVG 中的
fill、stroke等 inline 属性，否则会覆盖 CSS - 别用
!important锁死内联样式，否则currentColor失效
内联 SVG 后 DOM 对齐和基线问题
<svg> 默认是 display: inline，底部会留白（像文字一样对齐基线），导致和其他元素错位。
- 加
vertical-align: middle或vertical-align: -0.125em消除留白 - 更稳妥的做法是设
display: block，尤其在 flex/grid 容器中 - 不要给
<svg>设display: flex——它不是布局容器，会破坏内部坐标计算 - 如果父容器用了
font-size: 0清除间隙，记得在<svg>上重置font-size，否则currentColor可能失效
真正麻烦的从来不是贴代码，而是 viewBox 和坐标系对不齐、currentColor 被 inline fill 覆盖、或者 display 值悄悄破坏了渲染流——这些点不检查，调试半天也找不到根因。
