<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" />

      </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">

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