svg nested svg and preserveAspectRatio : animation added

<svg width="800px" height="800px" viewBox="0 0 200 200">
    <defs>
        <symbol id="symbol1">
            <circle cx="25" cy="25" r="25" style="stroke: inherit; fill: inherit;fill-opacity:.7"/>
        </symbol>
    </defs>

<g transform=" scale(1.5) translate(10,50)" style="transform-box:fill-box;transform-origin:50% 50%;">
    <rect x="100" y="5" width="30" height="80" style="stroke: blue;
fill: none;"/>
    <rect x="75" y="30" width="80" height="30" style="stroke: blue;
fill: none;"/>


    <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMax meet">
        <use href="#symbol1" stroke="red"/>
    </svg>

    <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet">
        <use href="#symbol1" stroke="green"/>
    </svg>

    <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMin meet">
        <use href="#symbol1" stroke="blue"/>
    </svg>

    <!--        -->

    <svg x="75px" y="30px" width="80px" height="30px" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet">
        <use href="#symbol1" fill="green"/>
    </svg>

    <svg x="75px" y="30px" width="80px" height="30px" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet">
        <use href="#symbol1" fill="red" />
        <animate attributeName="viewBox" values="0 0 0 0;0 0 500 500" begin="0" dur="3s" additive="sum" fill="freeze" repeatCount="indefinite"/>
    </svg>

    <svg x="75px" y="30px" width="80px" height="30px" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMid meet">
        <use href="#symbol1" fill="blue"/>
    </svg>

</g>
</svg>