SVG symbol与use实现图标精灵复用的完整指南

本文深入解析了SVG图标复用的核心技术——通过``与``实现高效、可靠的图标精灵（sprite）方案，直击开发者常遇的“图标不显示”痛点，系统阐明ID引用必须同文档、提前解析、严格匹配大小写等关键约束，并详解`viewBox`设置、响应式缩放、外部文件安全加载及CSS样式穿透等实战要点，提供从内联最佳实践到构建工具集成的一站式解决方案，助你真正掌握SVG图标的高性能、高兼容性复用艺术。

为什么直接用 有时图标不显示

最常见的现象是：SVG 定义了， 也写了，但页面空白。根本原因是 的 xlink:href（旧写法）或 href（新标准）必须指向**同文档内已定义的 ID**，且该 必须在 DOM 中已解析——不能放在