SVG 内の要素を複製する方法として、use 要素のみで複製する方法と、defs 要素を合わせて使用し複製する方法があります。

use 要素のみでコピーする

use 要素でコピーする場合は、コピー元となる要素に id を振り、use 要素にそのコピー元の id を xlink:href 属性に指定します。x 属性と y 属性でコピー元からの相対的な座標を指定します。0 を指定した場合はコピー要素はコピー元要素と重なって表示されます。

<svg width="600" height="250">
    <circle id="copy" cx="150" cy="100" r="50" fill="#F46860"/>
    <use x="150" y="50" xlink:href="#copy" />
</svg>

ブラウザでの表示

use 要素でコピーした図形に新たな属性を指定する

use 要素でコピーした図形にコピー元とは違う属性を指定することもできます。use 要素に stroke などの属性を指定すれば反映されます。

しかし、コピー元ですでに指定されている属性に関しては上書き変更できないため注意が必要です。use 要素で有効になるのは、コピー元で指定されていない属性のみです。

<svg width="600" height="250">
    <circle id="copy" cx="150" cy="100" r="50" fill="#F46860"/>
    <use x="150" y="50" xlink:href="#copy" fill="#69C0F9" stroke="#ccc" stroke-width="5" />
</svg>

ブラウザでの表示

use 要素 と defs 要素で要素を定義し複製する

use 要素 と defs 要素で複製する場合もまずコピーの元となる要素に id を振ります。defs 要素でコピー元を囲むと定義された要素ということになり非表示となります。

コピー元への指定を最小限にしておけば、コピーした側で要素で色や座標の変更も簡単に行え、便利に使用できます。

<svg width="600" height="250">
    <defs>
        <circle id="copy" cx="0" cy="0" r="50" />
    </defs>
    
    <use x="100" y="100" xlink:href="#copy" fill="#69C0F9" stroke="#ccc" stroke-width="5" />
    <use x="220" y="100" xlink:href="#copy" fill="#F46860" stroke="#666" stroke-width="5" />
</svg>

ブラウザでの表示