SVG use元素
SVG<use>元素在SVG文档的任何位置复用图形，包括<g>元素和<symbol>元素。复用的图形可以被定义在<defs>元素（使用前图形不可见）内或者外面。
use示例
下面是一个简单的<use>元素示例：
xml
<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><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元素外使用图形
只要图形有一个唯一的id属性，<use>元素可以在SVG图片中任何位置复用元素。示例如下：
xml
<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><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>这个例子定义了一个内部包含<rect>元素的<g>元素。然后通过<use>元素复用<g>元素（包含嵌套的<rect>元素）。
最终图片如下：
可以发现，原始图形和复用版都显示出来了。发生这样的情况，是因为复用的图形（<g>元素）未定义在<defs>元素或<symbol>元素内。因此其可见。
同样，蓝点表示<use>元素的坐标。
设置CSS样式
如果原始图形未设置CSS样式，你可以在复用其时设置CSS样式。你只需在<use>元素的style属性中指定样式。示例如下：
xml
<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><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属性。所以其使用默认样式（经典黑）渲染。