Exporting as an SVG in Adobe Illustrator canvas size issues

Question

I'm having real trouble with saving a simple SVG in Adobe Illustrator.

Illustrator keeps imposing its own canvas size on the export.

This is what I'm doing...

1) Draw an art board around the image

enter image description here

2) File > Save As

3) Change type to SVG

When I view the result, Illustrator has seemed to have resized the canvas arbitrarily enter image description here

How can I control this so I can get my own size?

After researching I've discovered it's not just me - http://forums.adobe.com/message/2851504 — SparrwHawk, Jun 21 '12 at 22:14
@Bjørn-RogerKringsjå SVG is in XML format and this question solves my problem with adjusting size of an image in HTML / JavaScript — Pawel, May 11 '15 at 12:40

score 54 · Answer 1 · answered Mar 31 '13 at 21:05

54

Your problem is that your SVG is being saved with the Artboard, which is set to the default document size.

Try using "Object > Artboards > Fit to Artwork Bounds" before you save.

answered Mar 31 '13 at 21:05

Nicholas Credli

907
9
14

3

I tried this but still get the whole document image size, any thoughts? – Toni Michel Caubet Jul 03 '13 at 15:31
1

I figured this out if you have a "layer" on your background. Select it and delete it. Then do what this answer tells you to do. – jsgoupil Aug 25 '14 at 18:57

score 5 · Answer 2 · answered Jul 07 '12 at 06:01

The Mac Finder (which I'm assuming you're using to view your SVGs) tends to ignore SVG boundaries. Shouldn't matter in production, although it's a bit annoying when you're viewing them in a folder.

Open your SVG file in a text editor, paying special attention to the opening tag. Make sure the cartesian coordinates in the "viewbox" attribute matches what you have in mind.

In-depth explanation of what the code means: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Coordinates

score 3 · Answer 3 · answered Jan 09 '15 at 13:07

Illustrator has an issue with artboards, ie "viewBox" in the .svg format. Try this: first adjust your artboard/canvas for your graphic in Illustrator, then save the file in .ai format.

Now from the .ai format you can save the file as .svg and your artboard will be as you adjusted it. Next time you open the .svg in Illustrator, the artboard will be messed up again, so you will have to work from the .ai file and just use the .svg on the web.

That means each time you need to adjust an .svg, you need to first save it in .ai-format, adjust the artboard, save it as .ai and then save it as .svg.

If you have a contact address to the people at Adobe, let them know...

score 0 · Answer 4 · answered Feb 17 '14 at 20:52

Sometimes you can unintentionally include small items in the illustration that increases the size. Try pressing Crtl + A to highlight everything in the document. Then, delete any extra items outside the illustration. This should resize the canvas.

score 0 · Answer 5 · answered Feb 18 '15 at 16:13

0

The solution to this is to use an optimiser like https://petercollingridge.appspot.com/svg-editor

This strips out white space and also optimises the file.

answered Feb 18 '15 at 16:13

changetheworld

1
2

Exporting as an SVG in Adobe Illustrator canvas size issues

5 Answers5