<h1>Reuse</h1>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible">
  <defs>
     <polygon id="polygon" points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" />
    <rect id="rect" width="100" height="100" />
    <circle id="circ" cx="50" cy="50" r="50" />
</defs>
  
   <g>
    <use xlink:href="#polygon" fill="pink" stroke="red" stroke-width="4" />
    <use xlink:href="#polygon" fill="none" stroke="antiquewhite" stroke-width="2" />
  </g>
  
  <g transform="translate(200)">
    <use xlink:href="#rect" fill="pink" stroke="red" stroke-width="4" />
    <use xlink:href="#rect" fill="none" stroke="antiquewhite" stroke-width="2" />
  </g>
  
    <g transform="translate(400)">
    <use xlink:href="#circ" fill="pink" stroke="red" stroke-width="4" />
    <use xlink:href="#circ" fill="none" stroke="antiquewhite" stroke-width="2" />
  </g>

</svg>

body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }