<div class="container">

  <h1>Source is invisible here</h1>

  <p class="sr-only">
    <svg>
      <symbol id="svg-square">
        <title>Alternate text for the symbol</title>
        <rect x="0" y="0" width="100" height="100" stroke="Black" style="stroke-width: inherit">
      </symbol>  
    </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" stroke="Grey">
    </svg>  
  </p>

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

  <p class="svg-container">  
    <svg viewbox="0 0 100 100" class="svg">
      <use xlink:href="#svg-square" fill="DarkGreen" stroke="Grey" stroke-width="15">
    </svg>    
  </p>

</div>  
/* 
  Visible for screen reader only:
*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* 
  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.