svg symbol

SVG Symbol 是一种 SVG 元素，它允许您在单个 <symbol> 标签中定义可重复使用的图形元素，并在需要时将其作为 <use> 标签的实例引用。

使用 <symbol> 元素创建的图形可以在 SVG 文件中多次使用，这样可以减少文件大小。您可以在多个文档中重复使用同一符号，而无需复制和粘贴整个元素。

例如，您可以在一个SVG文件中定义一个矢量图标，然后在网站的不同页面中多次使用该图标。这样可以减少代码量并提高性能。

以下是一个简单的示例：

<svg>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M12.1,20.8c-0.2,0-0.3-0.1-0.4-0.2L5,14.7c-1.7-1.6-1.7-4.2,0-5.8c0.9-0.8,2.1-1.2,3.3-1.2s2.4,0.4,3.3,1.2
      l1.4,1.3l1.4-1.3c0.9-0.8,2.1-1.2,3.3-1.2s2.4,0.4,3.3,1.2c1.7,1.6,1.7,4.2,0,5.8l-6.7,6.2C12.4,20.7,12.3,20.8,12.1,20.8z"/>
  </symbol>
  
  <use xlink:href="#icon-heart" x="0" y="0" width="24" height="24" />
  <use xlink:href="#icon-heart" x="30" y="0" width="24" height="24" />
</svg>

在示例中，我们创建了一个名为 "icon-heart" 的符号，并定义了一个包含路径的 <path> 元素。然后，我们使用 <use> 元素引用该符号，并在 x 和 y 坐标上放置两个实例。注意，我们在 <use> 元素中使用 xlink:href 属性来指定要使用的符号 ID。

这是一个简单的例子，您可以使用更复杂的图形和多个符号来创建复杂的图形和图标集。