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