I'm not sure entirely what's going on here. I'm exporting SVG's from Illustrator artboards. In the boards, they are exactly the same size (this is an icon set).
However when I set them as a background image there are some that will consistently not "fill up" the space they're set to take up in the height/width parameters.
Here's a jsFiddle to show what I mean. These were both exported the same exact way from Illustrator.. and if you inspect the smaller one it physically takes up as much space, as if there was an inside padding. So even if it make it twice as large in CSS with a width/height: 110px;, it becomes hard to position as it pushes other elements away.
I have a total of 6 icons used in this set, and 4 of them are exactly the same. There's 4 that are smaller like this though & I'm not sure why this is.
First of all shouts out to ccprog for noticing I had an embedded PNG of a prostate massager in my SVG file. Definitely defeats my purpose of using SVGs. Took it out and while the filesize went down by 2mb I still was facing my original issue.
If someone has any insight as to what's going on here that would be amazing, but hopefully this helps out someone else running into this.
I was using Shopify when I noticed this but this appears to also affect my jsFiddle so I don't think it's specific to certain services (although I know Shopify does a lot of stuff in the bg in regards to compression, etc.) I had tried every export option I could in Illustrator. Someone in this answer suggested something about saving normally rather than exporting, and allowing the -01 suffix Illustrator automatically appends.
I did this and it worked all of a sudden. I played around and took the -01 off of the filename and had the SAME issue as before. So next I saved straight from Illustrator and made sure there was no '-01'. Again, the issue persisted. I just renamed the file, putting -01 there. No issues.
I have no idea why this is but using '-01' at the end of the file name corrected my issue. I didn't change anything else.