How do I center this loader inside the SVG-CodePudding

I would like to center this loader inside the grey SVG vertically and horizontally. I can't use external CSS. Just either inline CSS or another way. I tried doing myself but struggled for a while. Thanks

<svg viewBox="0 0 2560 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill="#F5F5F5" d="M0 0h2560v1440H0z"/>
  <path opacity=".2" fill="#000" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/>
  <path fill="#000" d="m26.013 10.047 1.654-2.866a14.855 14.855 0 0 0-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite"/>
  </path>
</svg>

CodePudding user response：

Wrap your spinner in a <symbol> with a viewBox attribute as suggested by @exaneta and place a symbol instance with a specific width and height like so:

body{
  margin:0;
}

*{
  border-box:border-box;
}

<svg width="100%" height="100vh" xmlns="http://www.w3.org/2000/svg" style="background:#F5F5F5">
  <symbol id="spinner" viewBox="5 5 30 30">
    <path opacity=".2" fill="#000" d="M20.2 5.17c-8.25 0-14.95 6.69-14.95 14.95s6.69 14.95 14.95 14.95s14.95-6.69 14.95-14.95c0-8.25-6.69-14.95-14.95-14.95zm0 26.58c-6.43 0-11.63-5.21-11.63-11.63s5.21-11.63 11.63-11.63s11.63 5.21 11.63 11.63s-5.21 11.63-11.63 11.63z" />
    <path fill="#000" d="M26.01 10.05l1.65-2.87a14.86 14.86 0 0 0-7.47-2.01v3.31c2.12 0 4.1 0.58 5.81 1.57z">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite" />
    </path>
  </symbol>
  <use href="#spinner" x="50%" y="50%" transform="translate(-20)" width="40" height="40">
</svg>

The <use> element's placement is adjusted by translate(-20) (height or width/2)