svg animation : <animate> preserveAspectRatio calcMode="discrete" ; <animateTransform>

<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:.3"/>
        </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"/>
<animate attributeName="preserveAspectRatio" values="xMinYMid meet;xMaxYMid meet;" calcMode="discrete" begin="0s" dur="3s" repeatCount="indefinite"/>
    </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;-250 -250 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"/>
<animate attributeName="preserveAspectRatio" values="xMaxYMid meet;xMinYMid meet"  calcMode="discrete"  begin="0s" dur="3s" repeatCount="indefinite"/>
    </svg>
<animateTransform attributeName="transform" type="rotate" values="0;360" begin="0" dur="3s" repeatCount="indefinite" additive="sum" fill="freeze"/>
</g>
</svg>