How to center svg animation?

Question

SVG

Comrades! Help me solve the problem, I've been trying to figure it out for an hour already, 0 results.
I need to align the SVG in the center, but it doesn't work .. It's always in the left corner.
It is possible to make it viewBox but all the same it is impossible exactly. Is there any automatic property?

<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid" class="lds-ripple">
    <circle cx="50" cy="50" r="14.0334" fill="none" stroke="#48A4F2" stroke-width="6">
      <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>
      <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>
    </circle>
    <circle cx="50" cy="50" r="33.5671" fill="none" stroke="#FFF" stroke-width="6">
      <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"></animate>
      <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate>
    </circle>
  </svg>

Answer 1

<circle cx="50%" cy="50%"