SVG 是实现图标复用最轻量语义化的方式，通过集中定义+调用，支持动态样式、响应式缩放及跨页面复用；推荐内联管理或外部 SVG Sprite 方案，并注意同源限制与 IE 兼容性。
SVG <symbol></symbol> 是 HTML5 中实现图标复用最轻量、最语义化的方式之一，尤其适合多页面项目——它把图标定义一次， anywhere 都能用 <use></use> 引入，不重复加载、不冗余 DOM、支持样式动态控制。
用 统一管理图标资源
把所有 SVG 图标集中写在页面底部（或独立 SVG 文件）的 <svg></svg> 容器内，每个图标用 <symbol></symbol> 包裹，并设置唯一 id。注意：要加 viewBox，不设宽高，让图标保持可缩放性。
示例：
<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-user" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
</symbol>
</svg>
在任意页面位置按需调用
用 <use></use> 标签引用 <symbol></symbol> 的 id，即可渲染图标。支持内联样式、CSS 类、甚至伪元素配合（如 ::before），也兼容响应式缩放。
立即学习“前端免费学习笔记（深入）”；
- 基础调用：
<svg class="icon"><use href="#icon-home"></use></svg> - 设置尺寸：
<svg width="20" height="20" class="icon"><use href="#icon-user"></use></svg> - CSS 控制颜色：
.icon use { fill: currentColor; }，再给父svg设color: #007bff即可换色
跨页面复用：推荐外部 SVG Sprite 方案
当项目页面较多时，把所有 <symbol></symbol> 抽成单独的 icons.svg 文件（纯 XML 格式），通过 <use href="icons.svg#icon-home"></use> 调用。现代浏览器均支持，且该文件可被缓存，真正实现“一次加载、全站复用”。
注意点：
- 确保
icons.svg与页面同源，否则部分浏览器会因 CORS 拒绝解析href外部片段 - 构建工具（如 Webpack/Vite）可用插件自动合并 SVG 并生成 sprite，避免手动维护
- 服务端可配置
Content-Type: image/svg+xml，提升兼容性
兼容性与渐进增强建议
IE9+ 支持 <symbol></symbol> + <use></use>，但 IE11 对外部 SVG 引用有 bug（需用 <object></object> 或 inline fallback）。稳妥做法：
- 开发阶段优先使用内联
<symbol></symbol>（适合中小型项目） - 上线前用自动化工具注入 sprite 到 HTML 底部，兼顾性能与兼容
- 为关键图标提供
<img src="fallback.png" alt="HTML5中SVG利用Symbol提升多页面图标复用率" >或 aria-label，保障可访问性
