html - How to remove extra space (padding) from this animated SVG?

Question

it's a spinnder icon, I am stuck at the part to remove the extra padding around the spinner icon.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="36px" height="36px" viewBox="0 0 100 100"
  preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g>

Answer 1

You need to change the viewBox attribute to viewBox="17 17 66 66" How do I know the new value for the viewBox?

I've wrapped everything inside the SVG element in a group #G.

In the JavaScript I'm getting the bounding box of the group using the getBBox() method and I'm using the properties of the bounding box to define the new value of the viewBox of the SVG element.

vievBox = "x y width height"

console.log(G.getBBox())

svg{border:solid}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="36px" height="36px" viewBox="17 17 66 66"
  preserveAspectRatio="xMidYMid">
  <g id="G">
<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g>
</g>
</svg>