CodePen

HTML

            
              <!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hardcore-hide">
  <circle id="template" cx="50" cy="50" r="50">
</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>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .hardcore-hide {
  display: none;
}

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

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

body {
  padding: 1rem;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................