SVG雪碧图是将多个定义集中写入一个SVG文件，通过按需引用，本质为矢量符号复用，不生成位图、无需background-position，天然适配高清屏、可缩放、可样式控制。
SVG雪碧图不是把小图标“合并成一张位图”，而是把多个<symbol></symbol>定义集中写进一个SVG文件，再用<use></use>按需引用。它不生成新图片，也不依赖background-position，本质是矢量符号复用，天然适配高清屏、可缩放、可样式控制。
SVG雪碧图怎么组织结构
核心是单个.svg文件内用<symbol></symbol>封装每个图标，并赋予唯一id。整个文件默认隐藏（display: none），只作符号库：
- 所有图标统一放在一个根
<svg></svg>中，添加xmlns和style="display:none" - 每个图标用
<symbol id="icon-home" viewbox="0 0 24 24">…</symbol>包裹，viewBox必须准确匹配原始设计尺寸 - 推荐将该SVG文件作为独立资源引入HTML（如
<link rel="preload" href="icons.svg" as="image">），或内联在页面顶部
HTML里怎么调用单个图标
不用img标签，改用<svg><use xlink:href="icons.svg#icon-home"></use></svg>（现代浏览器支持href而非xlink:href）：
-
<use></use>会从外部SVG中提取对应<symbol></symbol>内容，注入当前SVG上下文 - 可直接在
<use></use>上设置width、height、fill等样式，颜色、大小、滤镜都能动态控制 - 无需额外CSS定位，也不存在偏移错位、间距难调等问题
如何生成和维护SVG雪碧图
手动拼接容易出错，建议用自动化工具统一管理：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段：用
svg-sprite（Node.js工具）把散装SVG文件自动合并为雪碧图SVG + 可选CSS/JS辅助文件 - 构建流程：Webpack用户可用
svg-sprite-loader，Vite可用vite-plugin-svg-icons，支持按需导入、自动注册ID - 命名与分类：保持源SVG文件名语义化（如
home.svg→icon-home），便于生成ID和维护
相比传统CSS Sprites的优势在哪
SVG雪碧图解决的不只是“减少请求”这一个问题：
- 无缩放失真：矢量图形，1px线在2x屏上依然锐利，不用准备@2x图
-
样式可控：
fill、stroke、opacity等CSS属性直接生效，hover变色、主题切换零成本 - 体积更小：纯XML文本，压缩后往往比同等复杂度的PNG雪碧图小50%以上
-
无障碍友好：可在
<use></use>外层加role="img"和aria-label，语义清晰
