<div class="hide">
  <svg id="circle" width="100" height="100">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="lightgreen" />
  </svg> 
</div>

<svg width="100" height="100"><use xlink:href="#circle" class="circle-1"></svg>
<svg width="100" height="100"><use xlink:href="#circle" class="circle-2"></svg>
<svg width="100" height="100"><use xlink:href="#circle" class="circle-3"></svg>

.hide {
  display: none;
}

svg circle {
  fill: inherit;
  stroke: inherit;
}

.circle-1 {
  stroke: #2E4C6D;
  fill: #396EB0;
}

.circle-2 {
  stroke: #FFBC97;
  fill: #EED6C4;
}

.circle-3 {
  stroke: #FF5DA2;
  fill: #99DDCC;
}