《SVG 不挨踢》第 8 集：SVG 精灵图——网页加速黑魔法

本期目标：把 N 个图标塞进 1 个 SVG，用 <use> 随处召唤，HTTP 请求瞬间从 20 变成 1，老板以为你偷偷买了 CDN。

1. 先骂骂咧咧：图标太多，请求像春运

以前的老办法：

• logo.png arrow.png user.png … 各来 1 个请求，20 个图标 = 20 次握手。
• 雪碧图？行，但位图放大糊，还要算 background-position 算到秃。

SVG 精灵图一句话：“1 个文件，无限复制，还能矢量放大”。
今天学完，你的请求数直接砍到 1，缓存一次，全站爽飞。

2. 核心武器：<symbol> + <use>

• <symbol>：把图标“打包”成乐高积木，单独命名。
• <use>：想在哪用，就 xlink:href="#id" 召唤，随意缩放、改色。

3. 五步实操——20 个图标合并 1 文件

① 新建 icons.svg（当精灵图仓库）

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <!-- 1. 主页图标 -->
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 22h18V10L12 3 3 10z"/>
  </symbol>

  <!-- 2. 用户图标 -->
  <symbol id="icon-user" viewBox="0 0 24 24">
    <circle cx="12" cy="8" r="4"/>
    <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
  </symbol>

  <!-- 3. 爱心图标 -->
  <symbol id="icon-heart" viewBox="0 0 100 100">
    <path d="M50,30 C50,20 40,10 25,20 C10,30 25,50 50,75 C75,50 90,30 75,20 C60,10 50,20 50,30 Z"/>
  </symbol>
</svg>

注意：根元素加 style="display:none;"，仓库本身不占空间。

② HTML 里召唤（想在哪用就放哪）

<!-- 首页导航 -->
<svg width="24" height="24">
  <use href="icons.svg#icon-home"></use>
</svg>

<!-- 用户头像 -->
<svg width="24" height="24" class="c-red">
  <use href="icons.svg#icon-user"></use>
</svg>

<!-- 彩虹爱心，超大 -->
<svg width="100" height="100" class="rainbow-fill">
  <use href="icons.svg#icon-heart"></use>
</svg>

解释：

• href="icons.svg#id" → 拿仓库里的对应符号
• 想放大？直接改 width/height，矢量不怕糊
• 想换色？CSS 控制 fill/currentColor，后面讲

4. 提速数据对比——嘴炮不如数字

真实案例：某电商首页 38 个图标，切到 SVG 精灵后，首屏请求数 -37%，Lighthouse 性能分 +11，老板开心到请喝奶茶。

5. CSS 换色技巧——一次染色，全套主题

① 当前色染色法

给 <use> 的父级 svg 加 class="c-red"：

.c-red { color: #e91e63; }
svg use { fill: currentColor; }

想换主题？全局改 color，所有图标跟着变，深夜模式 2 秒搞定。

② 彩虹渐变法

把 fill="url(#rainbow)" 写在 CSS 里，渐变图标也能玩精灵图：

.rainbow-fill use { fill: url(#rainbow); }

6. 细节坑指南——别让精灵翻车

7. 立刻装×——3 种社交姿势

1. “性能优化报告”
   把请求截图发群里：“38→1，矢量还放大不糊，KPI 已达成。”
2. “主题切换 DEMO”
   按钮一点，全站图标换色，设计师当场拜师。
3. “简历技能栏”
   写“掌握 SVG Sprite 性能优化”，面试官看完直接问：“啥时候入职？”

8. 课后作业（任选）

A. 把 首页现有 5 个图标 合并成 icons.svg，HTML 用 <use> 召唤，截图性能面板。
B. 写 CSS 当前色 换主题（红/蓝/彩虹），录屏发贴。
我抽 5 人送「第 9 集 Figma 导出 SVG 不踩坑指南」。

9. 下集预告

第 9 集《导出技巧：从 Figma/AI 到 SVG 不踩坑》
教你 一键导出、路径简化、无用代码清理，让设计师开心、重构更开心。
想继续？评论区敲 1，我连夜把导出按钮塞进你的记事本！