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!
Saving SVG with Space Around It from Illustrator is a post from CSS-Tricks
