Why the actual size of some svg is different from what it looks like

Question

I want to create icon font from svg files. I'm using https://www.fluttericon.com/ to do that. But when I create a dot-3 icon, there is a problem: The icon size is too large, exceeds the normal icon size. Here's the preview of the wrong icon:

And here's the preview of the normal icon:

Obviously, each dot of the wrong icon is the size of a whole normal icon, so three dots would be exceed the size of a normal icon

But the two svg files are not clearly distinguishable in the svg generator. I don't know why there's difference between them.

Here's the code:

The wrong one:

<svg xmlns="http://www.w3.org/2000/svg" width="45" height="9">
  <g>
  <path d="M40.5,9A4.582,4.582,0,0,1,36,4.5,4.671,4.671,0,0,1,40.5,0,4.582,4.582,0,0,1,45,4.5,4.5,4.5,0,0,1,40.5,9Zm-18,0A4.583,4.583,0,0,1,18,4.5,4.672,4.672,0,0,1,22.5,0,4.583,4.583,0,0,1,27,4.5,4.5,4.5,0,0,1,22.5,9ZM4.5,9A4.582,4.582,0,0,1,0,4.5,4.671,4.671,0,0,1,4.5,0,4.582,4.582,0,0,1,9,4.5,4.5,4.5,0,0,1,4.5,9Z"/>
</g>
</svg>

The right one:

<svg height="1000px" width="920px" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M110 390c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -10.667 55 -32 77c-21.333 22 -47.333 33 -78 33c-30.667 0 -56.667 -11 -78 -33c-21.333 -22 -32 -47.667 -32 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0m350 0c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -11 55 -33 77c-22 22 -47.667 33 -77 33c-29.333 0 -55 -11 -77 -33c-22 -22 -33 -47.667 -33 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0m350 0c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -10.667 55 -32 77c-21.333 22 -47.333 33 -78 33c-30.667 0 -56.667 -11 -78 -33c-21.333 -22 -32 -47.667 -32 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0" />
  </g>
</svg>