内联SVG在需动态变色、响应暗黑模式、添加hover动画或随font-size缩放时是唯一可靠方式；必须设viewBox、清除所有内联fill/stroke、用fill="currentColor"并确保父容器有color声明。
内联SVG什么时候必须用
需要动态变色、响应暗黑模式、加 hover 动画，或者图标要随 font-size 缩放时，fill="currentColor" 是唯一可靠路径——只有内联能继承父级 color 并被 CSS 选中。比如按钮图标在 :hover 时变蓝，或主题切换时自动反色，<img src="icon.svg"> 完全做不到。
常见错误：复制 Sketch/Figma 导出的 SVG 直接粘贴，结果图标发虚或错位。原因通常是漏了 viewBox，或保留了冗余 <defs> 和 inline fill="#000"，导致 CSS 覆盖失效。
-
viewBox必须写，例如viewBox="0 0 24 24"，只设width/height不足以保证等比缩放 - 删掉原始 SVG 中所有
fill、stroke等内联样式，改由 CSS 统一控制 - 加
display: block或vertical-align: middle，避免默认inline带来的底部留白 - 导出后手动清理
xmlns（HTML5 不需要）和overflow="hidden"（可能裁剪动画）
外部SVG什么时候更合适
图标数量超过 20 个、复用场景多（比如多个页面都用同一组导航图标）、或设计资源由专人维护时，外链是更可持续的选择。<img src="home.svg"> 最轻量，浏览器缓存生效快，且不污染 HTML 体积。
但要注意：本地开发时 img src="icons/home.svg" 报 404，大概率是因为路径不在 public/ 目录下——Vite/Webpack 默认只服务该目录；线上部署也需确认 Nginx/Apache 返回了正确的 image/svg+xml MIME 类型，否则会下载而非渲染。
立即学习“前端免费学习笔记（深入）”；
-
<img>引入的 SVG 是“黑盒”，svg:hover path { fill: red }无效 - 想换色？只能提前在 SVG 文件里写
fill="currentColor"，再靠父级color驱动，否则得准备多套文件 - 纯装饰性图标（如背景花纹、分隔线）用
background-image: url(...)更灵活，但无法被屏幕阅读器识别 - IE11 及以下不支持
<use href="sprite.svg#id">，需 fallback 到<img>或 polyfill
SVG sprite 怎么避免踩坑
<symbol> + <use> 是平衡复用与语义的折中方案，但实际落地常卡在三个地方：位置、同源、样式继承。
<symbol> 必须放在文档可解析范围内（比如 <body> 开头），不能塞进 <template> 或 JS 动态插入后才挂载——否则 <use href="#icon-home"> 找不到目标。
-
<symbol>自身不渲染，加style="display: none;"安全，但别用hidden属性（部分旧浏览器不识别） -
<use>不继承外部fill，必须在<symbol>内部的<path>上显式写fill="currentColor" - 跨域 SVG（如 CDN 上的
https://cdn.example.com/icons.svg）无法被<use>引用，浏览器会静默失败 - Webpack/Vite 插件（如
vite-plugin-svg-icons）能自动扫描src/icons/下文件生成 symbol 注入，比手写更可靠
构建工具怎么接管SVG管理
手动维护 50+ 个内联 SVG 或反复更新 sprite 文件，很快就会失控。现代工程化方案不是“选哪种引入方式”，而是“让工具决定何时内联、何时外链”。
Vite 的 vite-plugin-svg-icons 或 Webpack 的 svg-sprite-loader 可以按需处理：小图标（<img> 外链，同时生成类型声明和 React/Vue 组件封装。
- 插件通常要求 SVG 源文件统一放在
src/assets/icons/，命名规范（如home.svg→ 组件名IconHome） - 导出时禁用自动添加
xmlns和version，避免 HTML 解析异常 - CI 构建阶段可加校验：扫描所有 SVG 是否含硬编码
fill="#fff"，强制替换为currentColor - 图标变更频繁的项目，建议搭配 Storybook 预览所有图标在不同主题、尺寸、状态下的表现
真正难的不是技术选型，而是定义清楚哪些图标属于“语义关键”（必须内联）、哪些属于“视觉装饰”（可外链）、以及谁负责同步设计稿里的 SVG 修改。没对齐这些，工具再强也救不了混乱的图标库。
