Как удалить пробел из этого SVG

Question

Этот svg должен отображаться в небольшой области, поэтому пустое пространство вокруг svg вызывает проблему, как я могу уменьшить его так, чтобы там был только загрузчик и не было пустой области.

<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
<!--circle(cx="16",cy="50",r="10")-->
<circle cx="84" cy="50" r="0" fill="#413fa4">
 <animate attributeName="r" 
          values="10;0;0;0;0" 
          keyTimes="0;0.25;0.5;0.75;1" 
          keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
          calcMode="spline" 
          dur="2.8s" 
          repeatCount="indefinite" 
          begin="0s"></animate>
<animate attributeName="cx" 
         values="84;84;84;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
</circle>
<circle cx="46.4254" cy="50" r="10" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
</circle>
<circle cx="16" cy="50" r="8.94865" fill="#413fa4">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
         </circle>
<circle cx="84" cy="50" r="1.05135" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate></circle>
<circle cx="80.4254" cy="50" r="10" fill="#413fa4">
<animate attributeName="r" 
         values="0;0;10;10;10" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;16;50;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
         </circle>
</svg>

Answer 1

изменить cy значение на 10 это удалит ненужные места сверху и снизу

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
    <!--circle(cx="16",cy="10",r="10")-->
    <circle cx="84" cy="10" r="0" fill="#413fa4">
        <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="46.4254" cy="10" r="10" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
    </circle>
    <circle cx="16" cy="10" r="8.94865" fill="#413fa4">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
    </circle>
    <circle cx="84" cy="10" r="1.05135" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="80.4254" cy="10" r="10" fill="#413fa4">
        <animate attributeName="r" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
</svg>