How to remove space from svg file in PHP

Question

How to remove the white space in svg file?

This is the my svg file.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<rect width="100%" height="100%" fill="none"/>

    <circle cx="72" cy="50" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.9s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.9s"></animate>
    </circle>
    <circle cx="67.79837387624885" cy="62.93127555043441" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.8s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.8s"></animate>
    </circle>
    <circle cx="56.798373876248846" cy="70.92324335849338" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.7s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.7s"></animate>
    </circle>
    <circle cx="43.20162612375116" cy="70.92324335849338" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.6s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.6s"></animate>
    </circle>
    <circle cx="32.201626123751154" cy="62.931275550434414" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.5s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.5s"></animate>
    </circle>
    <circle cx="28" cy="50" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.4s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.4s"></animate>
    </circle>
    <circle cx="32.201626123751154" cy="37.06872444956559" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.3s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.3s"></animate>
    </circle>
    <circle cx="43.201626123751154" cy="29.076756641506623" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.2s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.2s"></animate>
    </circle>
    <circle cx="56.79837387624884" cy="29.07675664150662" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.1s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.1s"></animate>
    </circle>
    <circle cx="67.79837387624885" cy="37.068724449565586" fill="#007a5c" r="4">
        <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="0s"></animate>
    </circle>
</svg>

I have used imagemagick, but it doesn't work well.

Answer 1

Not that is makes that much of a difference, but instead of placing each circle element "absolute" you can place the circles in a grouping element (<g>) and use transform/rotate to place the circles.

<svg xmlns="http://www.w3.org/2000/svg" height="100" viewBox="0 0 52 52" preserveAspectRatio="xMidYMid">
  <g transform="translate(26 26)">
    <circle transform="rotate(0)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.9s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.9s" />
    </circle>
    <circle transform="rotate(36)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.8s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.8s" />
    </circle>
    <circle transform="rotate(72)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.7s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.7s" />
    </circle>
    <circle transform="rotate(108)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.6s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.6s" />
    </circle>
    <circle transform="rotate(144)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.5s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.5s" />
    </circle>
    <circle transform="rotate(180)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.4s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.4s" />
    </circle>
    <circle transform="rotate(216)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.3s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.3s" />
    </circle>
    <circle transform="rotate(252)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.2s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.2s" />
    </circle>
    <circle transform="rotate(288)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-.1s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-.1s" />
    </circle>
    <circle transform="rotate(324)" cx="22" fill="#007a5c" r="4">
      <animate attributeName="r" values="2.4;2.4;4;2.4;2.4" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="0s" />
      <animate attributeName="fill" values="#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="0s" />
    </circle>
  </g>
</svg>