内联 SVG 更适合图标系统，因其允许 CSS/JS 直接触达子元素；需带 viewBox、用 fill="currentColor"，推荐 <symbol>+<use> 复用，注意性能与兼容性。
内联 SVG 为什么比 <img src="icon.svg"> 更适合图标系统
因为只有内联才能让 CSS 和 JS 真正触达 <path>、<circle> 这些子元素。用 <img> 加 SVG 文件，浏览器只把整个图形当黑盒位图处理——document.querySelector("svg path") 返回 null，.icon:hover path { fill: red } 完全无效，暗色模式下硬编码的 fill="#000" 也会锁死颜色。
常见错误现象包括：图标在 Safari/旧 WebView 中白屏、缩放后模糊或裁剪、hover 动画无响应、切换主题色失败。这些几乎都指向同一个根源：没内联，或内联但漏了关键属性。
- 必须带
viewBox，例如viewBox="0 0 24 24"；写成width="48" height="48"而不设viewBox就会糊成一团 - 删掉所有子元素上的
fill、stroke内联值，改用fill="currentColor" - CSS 只需控制父容器：
.icon { color: #007bff; }，子元素自动继承
<symbol> + <use> 是复用内联 SVG 的唯一合理方式
直接把 20 个图标全内联到 HTML 里，体积膨胀、难以维护、更新不同步。但逐个复制粘贴 <svg> 块又违背复用原则。正确做法是集中定义 <symbol>，再用 <use> 引用：
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
</svg>
<svg class="icon"><use href="#icon-home"/></svg>
<svg class="icon"><use href="#icon-search"/></svg>
这样既保持内联优势，又避免重复代码。注意：<symbol> 必须放在文档顶部（如 <body> 开头），且 <use> 不支持 IE11 以下版本；若需兼容，得 fallback 到 <img> 或 polyfill。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<symbol>本身不渲染，只作模板，所以加style="display: none;"安全 -
<use>引用时，viewBox继承自<symbol>，无需重复写 - 不要在
<use>上直接写fill，它不继承样式；统一靠fill="currentColor"+ 外部color控制
移动端 H5 中内联 SVG 的性能陷阱必须绕开
在 iOS Safari 或低端 Android 上，内联大量 <path> 或用 JS 拼接字符串插入 SVG，会触发解析卡顿甚至白屏。这不是“SVG 慢”，而是 DOM 构建和渲染层被拖垮。
典型错误包括：动态生成图标时用 innerHTML += <svg>...</svg>、给每个 <path> 单独绑定 touchstart、滥用 <feGaussianBlur> 滤镜。
- 路径数据超过 50 个
<path>时，优先走<symbol>+<use>，别硬塞进 HTML - 动画只用 CSS
transform驱动外层<g>或<svg>，禁用 SMIL（iOS 已弃用） - 事件委托到父级
<svg>，用event.target.tagName === "path"判断目标 - 不可见 SVG（比如 tab 切换后隐藏的）必须调用
.remove()，不能只靠display: none
小项目 vs 多页系统：内联 SVG 的边界在哪
≤10 个图标、单页应用、首屏强依赖图标的场景，直接内联最简单高效——无请求、无缓存失效、首次渲染即完成。但一旦图标数上 20、跨多个页面复用、需要频繁更新，内联就变成维护噩梦。
这时该考虑 SVG Sprite 文件 + <use>，或构建时注入（如 Webpack 的 svg-sprite-loader）。如果团队已用 React/Vue，封装成组件更自然，但要注意 SSR 下 <use href> 的跨域限制和 hydration 问题。
最容易被忽略的一点：无论用哪种方式，viewBox 和 fill="currentColor" 是所有方案的共同前提。漏掉它们，后续所有优化都打折扣。
