内联 svg 更适合图标系统，因其允许 css/js 直接触达子元素；需带 viewbox、用 fill="currentcolor"，推荐 + 复用，注意性能与兼容性。
内联 SVG 为什么比 <img src="icon.svg"> 更适合图标系统
因为只有内联才能让 CSS 和 JS 真正触达 <path></path>、<circle></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></symbol> + <use></use> 是复用内联 SVG 的唯一合理方式
直接把 20 个图标全内联到 HTML 里，体积膨胀、难以维护、更新不同步。但逐个复制粘贴 <svg></svg> 块又违背复用原则。正确做法是集中定义 <symbol></symbol>，再用 <use></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"></path></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"></path></symbol></svg><svg class="icon"><use href="#icon-home"></use></svg><svg class="icon"><use href="#icon-search"></use></svg>
这样既保持内联优势，又避免重复代码。注意：<symbol></symbol> 必须放在文档顶部（如 开头），且 <use></use> 不支持 IE11 以下版本；若需兼容，得 fallback 到 <img> 或 polyfill。
-
<symbol></symbol>本身不渲染，只作模板，所以加style="display: none;"安全 -
<use></use>引用时，viewBox继承自<symbol></symbol>，无需重复写 - 不要在
<use></use>上直接写fill，它不继承样式；统一靠fill="currentColor"+ 外部color控制
移动端 H5 中内联 SVG 的性能陷阱必须绕开
在 iOS Safari 或低端 Android 上，内联大量 <path></path> 或用 JS 拼接字符串插入 SVG，会触发解析卡顿甚至白屏。这不是“SVG 慢”，而是 DOM 构建和渲染层被拖垮。
典型错误包括：动态生成图标时用 innerHTML += <svg>...</svg>、给每个 <path></path> 单独绑定 touchstart、滥用 <fegaussianblur></fegaussianblur> 滤镜。
- 路径数据超过 50 个
<path></path>时，优先走<symbol>+<use></use></symbol>，别硬塞进 HTML - 动画只用 CSS
transform驱动外层<g></g>或<svg></svg>，禁用 SMIL（iOS 已弃用） - 事件委托到父级
<svg></svg>，用event.target.tagName === "path"判断目标 - 不可见 SVG（比如 tab 切换后隐藏的）必须调用
.remove()，不能只靠display: none
小项目 vs 多页系统：内联 SVG 的边界在哪
≤10 个图标、单页应用、首屏强依赖图标的场景，直接内联最简单高效——无请求、无缓存失效、首次渲染即完成。但一旦图标数上 20、跨多个页面复用、需要频繁更新，内联就变成维护噩梦。
这时该考虑 SVG Sprite 文件 + <use></use>，或构建时注入（如 Webpack 的 svg-sprite-loader）。如果团队已用 React/Vue，封装成组件更自然，但要注意 SSR 下 <use href></use> 的跨域限制和 hydration 问题。
最容易被忽略的一点：无论用哪种方式，viewBox 和 fill="currentColor" 是所有方案的共同前提。漏掉它们，后续所有优化都打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
