How to save svg for snapsvg.js?

Question

Adobe Illustrator

The site has several icons implemented using the snapsvg.io
library. We need to add one more.
At first glance, everything is very simple. When the page is loaded, a path is added, when hovered, it is replaced by another, while as if "flowing" from one state to another.
Example: jsfiddle.net/frbt1eu9/3
The first block is an icon on the site. Works as it should.
The source code of the site contains this icon in svg format. I assumed that the designer drew it, copied it from this svg path to the js code during development, and you're done. But no.
The second block is the copied path, the code does not work.
In the course of experiments, saving in different versions, with different settings (Adobe Illustrator CC) and sizes, it was not possible to obtain the desired result.
In the third block of the example, the elementary one is the transformation of a square into a circle. But even here the problem is that it is not located in the center, it is not "rounded" to the end.
At first glance, you can see that the path code from the first block is different, built according to a different principle.
How to save svg correctly?

Answer 1

Conclusions:
1. There is technically no difference between the Path that was already in the script and the one that Illustrator produces.
As in the script, you can get it by exporting svg from Photoshop.
2. It is much more important to specify the viewbox correctly. Article about svg scaling: https://css-tricks.com/scale-svg/