<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 100 115" enable-background="new 0 0 200 200" xml:space="preserve">
  <symbol id="circle-1">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </symbol>
  <symbol id="circle-2">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
  </symbol>
</svg>

<svg>
  <use xlink:href="#circle-1" />
</svg>

<svg>
  <use xlink:href="#circle-2" />
</svg>

<svg>
  <use xlink:href="#circle-2" />
</svg>
img {
  width: 300px;
  height: 300px;
}

/*#circle-2 circle{
  fill: red;
}*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.