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.
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!
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.
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.
Ah yes! True. I just always avoid saving SVG in that way as that’s the way you get all the cruft. Stuff like:
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
I think using the methods Illustrator provides for “exporting” is the way to go, and then saving original artwork in the native Illustrator format.
Hm I like Inkscape. I had never think about such issues – it works like a charm :)
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.
This works, but it will (annoyingly) will put the artboard number after the filename.
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 :)