svg preserveAspectRatio : using viewport width,viewport height and nested svgs

<div style="border:1px solid black;">

<svg width="100%" height="100%" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>nested svg</title>

    <desc>we love nested svgs!
this is fun.
preserve Aspect Ratio</desc>



  <defs>
    <symbol id="symbol1">
<!-- 
      <circle cx="25" cy="25" r="25" style="stroke: inherit; fill: inherit;fill-opacity:.3"></circle>
-->
      <circle cx="25" cy="25" r="25" style="stroke: inherit; fill: inherit;fill-opacity:.3"></circle>
    </symbol>


  </defs>

    <rect x="0" y="0" width="25vw" height="25vh" style="stroke: blue;fill: none;"></rect>

    <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin meet">
      <use fill="green" xlink:href="#symbol1"></use>
    </svg>

    <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet">
      <use fill="red" xlink:href="#symbol1"></use>
    </svg>

    <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax meet">
      <use fill="blue" xlink:href="#symbol1" ></use>
    </svg>

</svg>

</div>