4

I have my image on the artboard and have clicked Object > Artboards > Fit to artboard bounds.

enter image description here

When I save an SVG I get extra whitespace at the bottom, how can I just save whats in the artboard? I have even selected just the 'artboard 1' in the save options, still whitespace.

Here is what am I talking about

enter image description here

5
  • What is the size of the artboard and image?
    – user9447
    Commented Apr 21, 2014 at 13:45
  • Crop the art to match the artboard rather than using clipping masks.
    – Scott
    Commented Apr 21, 2014 at 19:56
  • its 960 x 560px. Commented Apr 21, 2014 at 20:23
  • Then there must be something at the bottom of the image.
    – Scott
    Commented Apr 21, 2014 at 21:01
  • 4
    It would appear that the focal point for the "rays" is at the bottom edge... eluding to the use of a clipping mask.... i.sstatic.net/wnf2P.jpg
    – Scott
    Commented Apr 21, 2014 at 21:38

4 Answers 4

4

In the Illustrator save dialog, there is an option where you can check 'Use Artboards'. Check this and it will save the image to the exact size of your artboard.

EDIT (from comment)

When using the Save As... dialog, it will save the artboard-cropped file as filename-01.svg. (note the -01 suffix). I assume you're checking that file, which means it is likely a bug in AI.

Try exporting as an .eps with artboard on, then export that to a .svg. Otherwise you may need to remove all vectors outside the artboard manually. Check for stray vectors, and if anything is hanging out over the edge of the artboard, try using the Pathfinder tool to manually crop to the artboard.

As a last resort, you can also edit the .SVG file in a code editor as it is XML based.

5
  • 2
    already tried this, still produces the above result Commented Apr 21, 2014 at 19:29
  • 1
    When using the save as dialog, it will save the artboard-cropped file as filename-01.svg. (note the -01 suffix). I assume you're checking that file, which means it is likely a bug in AI. Try exporting as an .EPS with artboard on, then export that to the .SVG. Otherwise you may need to remove all vectors outside the artboard manually. Check for stray vectors, and if anything is hanging out over the edge of the artboard, try using the Pathfinder tool to manually crop to the artboard. You can also access the .SVG file in a code editor as it is XML based, you might be able to fix it there.
    – John
    Commented Apr 21, 2014 at 20:27
  • Yes changing xml source fixed my issue, thankyou :) Commented Apr 21, 2014 at 23:43
  • 2
    @ServerSideSkittles I'm having the same issue as you when trying to export my SVGs. What exactly did you change about the XML that fixed your issue? Commented Sep 17, 2014 at 21:30
  • Wow! I don't understand what's going on, but if I even rename the file and take off -01 it reverts back to this weird state... Weird. Commented Aug 29, 2017 at 22:52
4

If you untick Responsive in the More Options panel in Save As..., it stops the extra whitespace.

1
  • Hi alexrogins, welcome to GDSE and thanks for your answer! If you have any questions, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Commented Sep 4, 2014 at 10:10
0

It is my experience that svg files often carry with them hidden elements. I use the direct selection tool (A) to capture just what I need from the svg file and then copy that to a new file.

1
  • Tried this, selected the elements, created new document and pasted in. Commented Apr 21, 2014 at 20:23
0

You need to save the .svg as a copy, not go through the File > Scripts > SaveDocsAsSVG option. The save as copy gives you the option to save artboards or not. You can also check the XML code before saving too with this route.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.