Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Alex Flores
Alex Flores
7,864 Points
Posted by Alex Flores
Alex Flores
7,864 Points

Illustrator SVG files resizing?

Hello all,

Hopefully someone will know what I'm doing wrong, but judging from internet searches, this seems to be a common problem.

I'm trying to create my own arrows/buttons in illustrator and save them via SVG. Problem is, when I save them as SVG and upload them via <img> they're massive. For some reason Illustrator makes their default size 350x350 - even though I have it set to 50x20. I've tried hitting them as unresponsive, which kinda works, but I don't like the idea of losing the responsiveness of my SVG files - that's kind of the whole point of using SVG.

Also, I've trying putting them in their own div, setting position to relative (parent and absolute for the children, which are the arrows) and this works also, but again I lose the responsiveness.

Any help would be appreciated.

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

I figured this out. Here's how I fixed it for anyone who runs into this issue:

  1. After creating your object, go to objects --> Artboard --> Fit to Artboard Bounds
  2. Save as SVG
  3. Under Subsetting, click "Only Glyphs Used"
  4. Make sure "Responsive" is UNCHECKED - don't worry, it'll still be responsive.

Hope this helps!