<div class="container">

  <h1>Source object</h1>

  <p>
    <svg>
      <g id="svg-square">
        <title>Alternate text for the symbol</title>
        <rect x="0" y="0" width="100" height="100" />
      </g>  
    </svg>
  </p>

  <h1>Cloned and filled rectangles with &lt;use&gt;</h1>

  <p class="svg-container">  
    <svg viewbox="0 0 100 100" class="svg">
      <use xlink:href="#svg-square" fill="LimeGreen">
    </svg>  
  </p>

  <p class="svg-container">  
    <svg viewbox="0 0 100 100" class="svg">
      <use xlink:href="#svg-square" fill="Green">
    </svg>    
  </p>

  <p class="svg-container">  
    <svg viewbox="0 0 100 100" class="svg">
      <use xlink:href="#svg-square" fill="DarkGreen">
    </svg>    
  </p>
  
</div>  
/* 
  Because of Internet Explorer: 
  Explanation in Czech: https://vrdl.cz/p/responzivni-svg
*/

.svg-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; /* Aspect ratio 1:1 */ 
}

.svg {
  position: absolute;
  top: 0;
  left: 0;
}

/*
Layout:
*/

.container {
  max-width: 30em;
  margin: 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.