-1

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.

little tiny man
  • 789
  • 4
  • 10
  • 26
  • https://graphicdesign.stackexchange.com/q/29967/23398 and https://graphicdesign.stackexchange.com/q/71667/23398 address this – Blazemonger Aug 29 '17 at 20:06
  • No they don't - my art boards are all 55x55. These icons all have the same dimensions, exported in the exact same way. – little tiny man Aug 29 '17 at 21:25
  • 2
    icon12.svg says it has a `viewBox="0 0 97 65.47"`. The circle background only fills a `viewBox="15.74 0 54.94 54.94"`. Why that is the case is a matter of what Illustrator exports, you won't get an answer here. - Both files contain base64-encoded PNGs (of a bowling pin????) in the background that are not rendered. Remove them, that will reduce the file size from currently 2 MB to less than 1 kB. – ccprog Aug 29 '17 at 22:35
  • @ccprog Excellent advice, I knew something else was going on... How can I get that encoded PNG out of there? In illustrator I'm just exporting with the artboard set as the same size as the icons. Also please submit this as an answer so I can give you that sweet sweet green check for being right – little tiny man Aug 29 '17 at 22:37
  • Also, just to help out in the future, can you share how you're able to see if there's an encoded PNG in these? – little tiny man Aug 29 '17 at 22:38
  • I don't know anything about Illustrator, so no advice and no valid answer from me. I'm using Inkscape, which contains an XML editor that shows a structured view of the file contents. Tip: zoom waaaaay out, the PNG has a size of > 3000x5000px. – ccprog Aug 29 '17 at 22:43
  • LOL that's actually a PNG of a prostate massager that slipped it's way in there somehow - my client for the project I'm working on here is in that business, so these files must have gotten a little mixed up. Good catch – little tiny man Aug 29 '17 at 23:03

1 Answers1

0

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.

little tiny man
  • 789
  • 4
  • 10
  • 26