Saving SVG with Space Around It from Illustrator

Say you have a graphic like this in Adobe Illustrator:

Note how the art doesn’t touch the edges of the artboard. Say you want that space around it, and you want to save it as SVG for use on the web.

Nope: Save for Web

THE CLAW! You’ll see space around here, but unfortunately the classic Save for Web dialog doesn’t export as SVG at all, so that’s not really an option.

They are already calling this a “legacy” feature, so I imagine it’ll be gone soon.

Nope: Export As

The “Export As” feature supports SVG, and you’ll likely be pretty pleased with the output. It’s fairly optimized, cruft-free, and pretty much ready to use on the web.

But… it crops to the art with no option to change that, so we’ll lose the space around that we’re shooting for here.

A possible work around here is putting a rectangle behind the art with the spacing around it we need, but then we get a rectangle in the output, which shouldn’t be necessary.

Nope: Asset Export

The Asset Export panel is mighty handy, but you the export crops to the art and there is no way to change that.

Yep: Export for Screens

The trick in preserving the space is to export the artboard itself. You can do that from the Export for Screens dialog.

The viewBox will then reflect the artboard and the space we have left around the art. That’s what we were aiming for, so I’m glad there is a way!

Comments

Jake Wilson

# August 18, 2017

Hmmm… I’m pretty sure if you just do Save As and choose “SVG” as the file type it also preserves all space around your artboard… It seems to be the case when I just tested it.

Alex Berkowitz

# August 18, 2017

I save SVGs from Illustrator all the time. I find the easiest way is to simply Save As and then select SVG as the type. You get an additional dialog box once you hit “Save” that lets you modify the SVG settings, and it keeps your artboard space. You can even click a little button at the bottom of the SVG settings window to view the SVG code (mine opens as plaintext in a browser) which is great for when you just want to copy/paste your code into another file without having to actually save a new SVG file.

Chris Coyier

# August 18, 2017

Ah yes! True. I just always avoid saving SVG in that way as that’s the way you get all the cruft. Stuff like:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

That stuff will get stripped out if you’re using optimizing software like SVGO, but that’s not a part of everyone’s SVG workflow all the time.

You also need to be careful to get the settings right, for example, leaving “Preserve Illustrator Editing Capabilities” off, otherwise you’ll get TONS MORE cruft, like

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">

I think using the methods Illustrator provides for “exporting” is the way to go, and then saving original artwork in the native Illustrator format.

Olli

# August 18, 2017

Hm I like Inkscape. I had never think about such issues – it works like a charm :)

Dirk Schulze

# August 18, 2017

You can export artboards with Export as… as well.

After selecting File > Export > Export as… the initial Export dialog opens. Here you can select Use Artboards and Illustrator will preserve the spacing of artboards with a viewBox as well.

Generator

Permalink to comment# August 20, 2017

This works, but it will (annoyingly) will put the artboard number after the filename.

Vasilj Milosevic

# August 19, 2017

Save as > svg
Or make a fully transparent box that matches the document and than export ;)

That’s my way

Anyway I always use gulp with svg optimizer when coding so no need for garbage cleanup by hand :)

This comment thread is closed. If you have important information to share, please contact us.