SVG的<use>元素可以从SVG文档的其他地方重用SVG形状，包括<g>元素和<symbol>元素。重用的形状可以在元素<defs>中定义(使该形状在使用前不可见)或者外部。

use示例

这是 <use>元素的一个简单示例：

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />

</svg>

本示例显示了在<defs>元素内定义的<g>元素。除非由<use>元素引用，否则这将使<g>不可见。

在引用<g>元素之前，必须通过其id属性设置ID。 " <use>"元素通过其" xlink：href"属性引用" <g>"元素。注意属性值中ID前面的"#"。

" <use>"元素通过其" x"和" y"属性指定在何处显示重复使用的形状。请注意，元素<g>中的形状位于0,0。这样做是因为它们的位置已添加到 <use>元素中指定的位置。

蓝点不是示例的一部分。它们被添加以显示两个<use>元素的x和y。

在defs元素外使用形状

只要<shape>具有唯一值的id属性， <use>元素就可以在SVG图像中的任何位置重用元素。这是一个例子：

<svg width="500" height="110">

    <g id="shape2">
        <rect x="0" y="0" width="50" height="50" />
    </g>

    <use xlink:href="#shape2" x="200" y="50" />

</svg>

这个例子定义了一个<g>元素，里面有一个<rect>元素。然后，它通过一个<use>元素重复使用<g>元素(包括嵌套的<rect>元素)。

请注意，同时显示了原始形状及其重用版本。之所以会发生这种情况，是因为未在 <defs>元素或者 <symbol>元素内定义重复使用的形状(元素<g>)。因此它是可见的。

再次，蓝点显示了<use>元素的坐标。

设置CSS样式

如果原始形状上没有设置CSS样式，则可以在重用形状时设置CSS样式。我们只需指定要在 <use&gt元素的style属性中设置的样式。这是一个例子：

<svg width="500" height="110">

  <g id="shape3">
      <rect x="0" y="0" width="50" height="50" />
  </g>

  <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
  <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>

</svg>

注意原始形状上没有设置" style"属性。然后将使用默认样式(通常为黑色)进行渲染。