SVG的<defs>和<use>通过“定义一次、多次引用”实现图形复用，不复制数据仅复用渲染指令；<defs>存放带id的可复用元素，<use>通过href引用并支持定位缩放；推荐用<symbol>+<use>构建图标系统，更规范可控。
SVG 的 <defs> 和 <use> 是实现图形复用的核心机制，本质是“定义一次，多次引用”，不复制实际图形数据，只复用渲染指令，节省代码体积且便于统一维护。
用 <defs> 定义可复用的图形
<defs> 标签本身不渲染任何内容，它只是容器，用来存放你打算重复使用的图形元素，比如 <circle>、<path>、<g> 或自定义符号（<symbol>）。这些元素必须有唯一 id，后续才能被引用。
例如：
<svg width="200" height="100"><defs>
<circle id="dot" cx="0" cy="0" r="4" fill="#3498db"/>
<g id="icon-home">
<path d="M10 20 L15 10 L20 20 Z" fill="#2ecc71"/>
<rect x="12" y="20" width="6" height="10" fill="#2ecc71"/>
</g>
</defs>
</svg>
用 <use> 引用并实例化
<use> 通过 xlink:href（旧标准）或 href（现代标准）指向 <defs> 中某个 id，把该图形“画出来”。你可以自由设置位置（x、y）、缩放（配合 transform）、颜色（部分属性可继承或覆盖）等。
注意：<use> 引用的是“定义”，不是副本 —— 修改 <defs> 中原始图形，所有 <use> 实例会同步更新。
例如（接上例）：
<use href="#dot" x="30" y="30"/><use href="#dot" x="60" y="30" fill="#e74c3c"/>
<use href="#icon-home" x="100" y="25" width="24" height="24"/>
推荐搭配 <symbol> + <use> 做图标系统
对于图标类复用，更规范的做法是用 <symbol> 包裹图形，并设 viewBox。它天然支持独立坐标系和尺寸控制，避免手动计算偏移。
-
<symbol>必须放在<defs>或<svg>根下，不能直接渲染 -
<use>引用<symbol>时，可用width/height缩放，x/y定位，且不受原始viewBox影响 - 示例：
<symbol id="check" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 18.83 21 7.17 19.59 5.76z"/></symbol>，再用<use href="#check" x="10" y="10" width="16" height="16"/>
注意事项和常见问题
-
href值必须带#，如href="#dot"；写成href="dot"会失效 - 跨文件引用需用完整 URL，如
href="icons.svg#dot"（需同源且浏览器支持） -
<use>无法直接修改内部子元素样式（如改<path>的stroke），但可通过 CSS 类、CSS 变量或fill/stroke属性继承来间接控制 - IE 不支持
href，需回退用xlink:href（兼容写法：xlink:href="#dot" href="#dot"）
基本上就这些。合理组织 <defs> 和 <use>，能让 SVG 更轻量、更易维护，尤其适合图标库、数据图表中的重复元素。
