<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
  <circle id="template" cx="50" cy="50" r="50" style="fill: var(--fill, blue);">
</svg>

<!-- USE TEMPLATE SEVERAL TIMES -->
<svg viewBox="0 0 100 100" class="circle circle-1">
  <use xlink:href="#template">
</svg>

<svg viewBox="0 0 100 100" class="circle circle-2">
  <use xlink:href="#template">
</svg>

<svg viewBox="0 0 100 100" class="circle circle-3">
  <use xlink:href="#template">
</svg>
.hide {
  display: none;
}

.circle {
  height: 100px;
  width: 100px;
}

.circle-1 {
  /*
  This would work (cascade) if there wasn't a `fill` on the `<circle>` already, but there is (a reasonable fallback) 
  
  fill: red;
  */

  --fill: red;
}
.circle-2 {
  --fill: orange;
}
.circle-3 {
  --fill: #f06d06;
}

body {
  padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js