内联svg是唯一能真正控制样式和交互的方式；必须保留viewbox定义逻辑坐标系，删子元素内联样式并用currentcolor统一配色，否则css无法覆盖、缩放失真或交互失效。
直接写 <svg></svg> 标签是唯一能真正控制样式和交互的方式，其他方式（<img>、<object></object>）要么锁死内部结构，要么增加运行时复杂度。
内联 SVG 必须带 viewBox，否则缩放会糊或裁剪
只写 width 和 height 不够，viewBox 才定义图形的逻辑坐标系。浏览器靠它做等比缩放，缺了就会拉伸、偏移或只显示一角。
-
viewBox="0 0 24 24"表示整个图形在 24×24 的逻辑网格里绘制，所有<circle cx="12"></circle>这类坐标都基于这个范围 - 常见错误：Figma 导出图标时保留了
width="24" height="24"，但删掉了viewBox→ 图形糊成一团 - 正确写法：
<svg width="24" height="24" viewbox="0 0 24 24"></svg>；响应式场景可去掉width/height，改用 CSS 控制容器尺寸
内联 SVG 的 fill 被 CSS 覆盖不了？先删掉原始 fill 属性
设计工具导出的 SVG 常在 <path></path> 上硬编码 fill="#000"，这属于内联样式，优先级高于外部 CSS，path { fill: red } 会失效。
- 手动删掉所有子元素上的
fill、stroke、style等 inline 属性 - 想让颜色随文字变？统一用
fill="currentColor"，再通过父元素的color控制 - 示例：
<svg class="icon" viewbox="0 0 24 24"><path d="..." fill="currentColor"></path></svg>+.icon { color: #2563eb; }
<img src="icon.svg"> 看似简单，但根本不能选中 <path></path>
这是最常被误用的点：<img> 加载的 SVG 是“黑盒”，它的 DOM 结构完全不接入当前页面文档树。
-
document.querySelector("img svg path")或document.querySelector("path")永远返回null -
.icon:hover path { fill: red }这类 CSS 完全无效——因为path根本不在当前 CSS 作用域里 - 本地双击打开 HTML 时，
<img>引用的 SVG 很可能白屏，因为缺少image/svg+xmlMIME 类型，必须走 HTTP 服务
别碰 <object></object> 除非你真需要复用文件且能处理 load 事件
<object></object> 表面看能交互，实际踩坑密集：跨域限制、load 事件不触发、移动端静默失败、fallback 渲染不可靠。
- 要访问内部元素，必须等
obj.onload后调用obj.contentDocument.querySelector("circle")，不能直接document.querySelector - 跨域 SVG（比如 CDN 上的图标）无法读取 DOM，脚本会报 SecurityError
- 每个
<object></object>都是一次独立 HTTP 请求，大量小图标时性能比内联差得多
真正需要动态换色、hover 动画、JS 修改路径数据的场景，只有内联一条路。其他方式省下的几 KB HTML 体积，往往换来更难调试的样式失效或交互断裂——尤其是当设计师给的 SVG 文件自带一堆冗余属性和命名空间时，第一件事永远是删 xmlns、删 fill、补 viewBox。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
