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

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

defs 里放可复用的图形资源

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

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

symbol 定义带 viewBox 的可缩放模板

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

Article To Html

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

下载

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

use 标签引用 symbol 实现复用

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

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

完整示例：图标库式写法

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

  
    
      
    
  


  


  

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！