SVG中<defs>和<symbol>实现图形复用：<defs>作为资源仓库存放不可见的可复用元素，<symbol>定义带viewBox的缩放模板，<use>通过href引用并支持样式覆盖与多实例渲染。

SVG 中 <defs> 和 <symbol> 是实现图形复用的核心机制，关键在于“定义一次，多处引用”，避免重复写代码，也便于统一维护样式和结构。

defs 里放可复用的图形资源

<defs> 是 SVG 的“资源仓库”，里面可以放 <symbol>、<g>、<path>、渐变、滤镜等。它本身不渲染，只供其他地方引用。

• 必须放在 <svg> 标签内部，通常建议放在最前面或 <g> 外层
• 里面的元素不会自动显示，除非被 <use> 引用
• 支持嵌套，比如在 <defs> 里再定义 <defs>

symbol 定义带 viewBox 的可缩放模板

<symbol> 是专为复用设计的容器，比 <g> 更强大：它自带 viewBox，能独立控制坐标系和缩放，且默认不可见。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须设置 id，才能被 <use href="#xxx"> 引用
• viewBox 是必需属性（如 viewBox="0 0 24 24"），决定内部图形的逻辑画布
• 可选加 preserveAspectRatio 控制缩放对齐方式
• 支持设置 width/height，但实际尺寸由引用时的 <use> 决定

use 标签引用 symbol 实现复用

<use> 是调用预定义图形的“开关”，通过 href 指向 <symbol> 的 id，还能单独设置位置、尺寸、颜色等。

立即学习“前端免费学习笔记（深入）”；

• 语法：<use href="#icon-home" x="10" y="20" width="20" height="20"/>
• 引用后，<symbol> 内部的 viewBox 会映射到 <use> 的宽高区域
• 可覆盖内部样式，例如给 <use> 加 fill="red"，会穿透影响 <symbol> 里的路径
• 支持多次引用同一 <symbol>，每个实例互不影响

完整示例：图标库式写法

下面是一个典型复用结构，定义一个“主页”图标，然后在不同位置按需调用：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="M10 20v-6h4v6h5v-8h-3V7a1 1 0 0 0-2 0v5H8v8z"/>
    </symbol>
  </defs>
</svg>
<svg width="24" height="24">
  <use href="#icon-home" fill="#333"/>
</svg>
<svg width="48" height="48">
  <use href="#icon-home" fill="#007bff" x="4" y="4"/>
</svg>