Как выровнять SVG анимацию по центру?

Question

[Иван]

Товарищи! Помогите решить проблему, уже битый час разбираюсь, результатов 0.
Нужно выровнять SVG по центру, но не получается.. Она постоянно в левом углу.

Можно это сделать viewBox но все равно ровно не получается. Есть ли какое нибудь автоматическое свойство?

<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

[0xD34F]

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