Bizarre Illustrator error - SVG output looks different

I've never run into this. For some reason, Illustrator is changing this SVG file (see versions 1 and 3) for a coat of arms, although it looks perfect on my screen and there are no apparent SVG errors. (I apologize as I do not code SVG by hand, so I wouldn't know how to fix it by looking at the Code).

This is how it looks on my screen:

And yet this is how it looks in a browser:

It's cropping off the top of the three pales nebuly (red bars with wavy lines). The earlier version actually cropped off the bottom, and then I recreated it, thinking I hadn't been paying attention, and it started cropping off the top:

There are no SVG errors with this file. I tried workarounds and finally got it to appear correctly by exporting to PDF and then using cloudconvert to convert back to SVG. But this still bothers me. I'm using Illustrator CC 2015 on Mac. Is this just a bug? Thanks.

Answer

This problem could be related to the "Decimal Places" setting, when saving the SVG.

In a SVG file, all the coordinates are measured in points and are rounded according to the "Decimal Places" setting.

If the physical dimensions of the document are "big" (the original from Wikimedia Commons is in A4 format), the rounding won't be visible to the eye, but as you scale down the object the decimals get more and more important.

Try saving your SVG with a higher "Decimal Places setting". 7 is max. If that isn't enough, try scaling up the document before saving - you can always downscale it in the browser.