内联svg必须用标签包裹并保留viewbox，否则无法缩放适配；引入的svg是黑盒，不支持css控制fill/stroke或js操作内部元素，而内联svg作为dom节点可完全交互与样式化。
内联 SVG 必须用 <svg></svg> 标签包裹原始 XML，且至少保留 viewBox；直接复制导出文件里的完整 XML 很可能失效。
为什么 <img src="icon.svg"> 不能替代内联 SVG
它只是个图片，fill、stroke、:hover 全部不响应 CSS，<path></path> 无法被 JS 选中或绑定事件。内联后，<svg></svg> 是 DOM 节点，<path></path> 是子元素，才能真正参与样式流和交互。
常见错误现象：
- CSS 设置
svg path { fill: red; }没反应 → 原因是 SVG 源码里写了fill="#000"，inline 属性优先级高于 CSS - 图标在移动端模糊或错位 → 原因是只设了
width="24"，没配viewBox或height，浏览器按默认 300×150 渲染 - 用
<use href="#logo"></use>报错 →<symbol id="logo"></symbol>没定义在当前 HTML，或定义位置在<svg></svg>使用之后
viewBox 是内联 SVG 的核心参数，不是可选项
viewBox="0 0 24 24" 定义的是逻辑坐标系（左上角原点，宽高各 24 单位），不是像素尺寸。它让 SVG 可缩放、可响应，也是 CSS 控制尺寸的前提。
必须配合显式尺寸使用：
- 推荐写法：
<svg width="24" height="24" viewbox="0 0 24 24"></svg>—— 固定像素尺寸，等比缩放 - 响应式写法：
<svg style="width: 1em; height: 1em;" viewbox="0 0 24 24"></svg>—— 继承父级字号，适配文字流 - 禁止只写
viewBox不设尺寸 → 浏览器按 300×150 渲染，图形可能极小或溢出 - 禁止只写
width和height不设viewBox→ 坐标系丢失，图形只显示左上角一小块
如何让 CSS 真正控制内联 SVG 的颜色
关键不是“能不能”，而是“怎么写才不被覆盖”。SVG 元素的 fill、stroke 等属于 presentation attribute，硬编码值会压制 CSS 规则。
正确做法：
- 删掉 SVG 源码里所有
fill="..."、stroke="..."、opacity="..."等 inline 属性 - 把需要变色的部分设为
fill="currentColor"（例如<path d="..." fill="currentColor"></path>） - 用 CSS 控制：给
<svg></svg>或其父容器设color: #333;，颜色自动透传 - 伪类可用：
svg:hover { color: #007bff; }或svg path:hover { fill: #007bff; }（需确保 path 没写死 fill）
容易忽略的点：如果 SVG 里有 <style></style> 标签或 class，要检查是否与页面全局样式冲突；导出工具（如 Figma、Illustrator）常带冗余 overflow="hidden"，会导致缩放时内容被裁切，必须手动删掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
