内联svg是唯一能真正控制图形内部元素的方式；因将svg视为位图，不解析内部结构，导致css选择器失效、js无法操作节点、hover变色失败。
内联 SVG 是唯一能真正控制图形内部元素的方式，其他方式（<img>、<object></object>、CSS background-image）都存在交互或样式限制。
为什么<img src="icon.svg">加载成功却无法 hover 变色
因为 <img> 把整个 SVG 当作一个位图对待，浏览器不会解析其内部的 <path></path>、<circle></circle> 等结构，CSS 选择器如 svg:hover path 根本不生效。常见错误现象包括：鼠标悬停无反应、JS 无法 querySelector('svg path')、暗色模式下图标颜色错乱。
- 适合场景：纯装饰性图标、静态 logo、不需要响应式缩放的占位图
- 必须确保服务器返回正确的
Content-Type: image/svg+xml，本地双击打开 HTML 会失败（file:// 协议不触发 MIME 类型协商） - 加
loading="lazy"可防阻塞，但不能解决交互缺失问题
<svg></svg> 标签必须设 viewBox 才能正常缩放
只写 width 和 height 而不设 viewBox，会导致图形拉伸、裁剪或在不同设备上显示不一致。现代浏览器（IE9+、所有主流移动 WebView）都依赖 viewBox 来建立坐标系和缩放逻辑。
-
viewBox="0 0 100 100"定义了逻辑画布范围，所有内部元素坐标（如cx="50"）都基于此系统 - 设了
viewBox后，width/height只控制容器尺寸，内容自动等比填充 - 禁止写
viewBox="0 0 0 0"或含负值，浏览器可能静默丢弃整个<svg></svg> - 响应式技巧：CSS 中移除
width/height，仅用max-width: 100%+height: auto，靠viewBox驱动缩放
内联 SVG 中的 fill 和 stroke 默认不继承颜色
即使父元素设置了 color: #333，<path fill="black"></path> 也不会跟着变——因为 fill 默认值是 black，不是 currentColor。这是 dark mode 下图标“突然消失”或 hover 不变色的根源。
- 正确写法：
<path fill="currentColor" d="..."></path>，这样它就能响应color、CSS 变量甚至:hover的文字颜色变化 - 避免在 SVG 内联
style属性里硬编码fill="#666"，会覆盖外部 CSS，调试困难 -
stroke同理，需显式设为currentColor才能跟随主题切换 - SVG 默认
display: inline，常需加display: block或vertical-align: middle消除底部留白
多个 SVG 图标复用该用 <symbol></symbol> + <use></use>
把一堆图标塞进一个 <svg></svg> 容器里，每个用 <symbol id="icon-home"></symbol> 包裹，再用 <use href="#icon-home"></use> 引用，既能压缩体积，又能统一维护样式和交互逻辑。
-
<symbol></symbol>必须放在文档任意位置的<svg></svg>标签内（推荐放底部），且id需全局唯一 -
<use></use>是轻量引用，不复制 DOM，修改一处<symbol></symbol>，所有<use></use>实例同步更新 - 注意：外部 SVG 文件中的
<symbol></symbol>无法被跨域<use href="icons.svg#home"></use>引用（CORS 限制），只能内联或同域部署 - 导出设计稿 SVG 时，删掉冗余
<defs></defs>、<style></style>和外部url(#xxx)引用，否则内联后失效
最容易被忽略的是 viewBox 缺失和 fill="currentColor" 的遗漏——这两个点一旦出错，图标在高倍屏、暗色模式、响应式断点下会集体“失联”，但错误本身又不报 JS 异常，排查成本远高于预防成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
