How to fix unwanted whitespace/padding when exporting SVG assets for web layouts?

Question

Hi everyone,I am designing vector graphics and icon assets in Illustrator to use inside responsive web containers and custom sidebar widgets.When I export my artwork using File > Export > Export for Screens (SVG format) and embed it into my website, there is noticeable empty padding/whitespace around the graphics that messes up the alignment and container spacing.I've tried tweaking the artboard dimensions, but the exported SVG still retains extra padding inside the bounding box on the web page.Is there a specific setting in Illustrator's SVG Export Options (like CSS properties, Responsive settings, or ViewBox parameters) that ensures the artboard trims tightly around the artwork without extra margins?Any advice on the best workflow for web-ready SVG exports would be greatly appreciated!

CORCTON34033231 · Answer

Hi! The padding comes from the artboard — in Export for Screens, the Artboards tab exports the whole artboard, so any empty artboard area becomes the SVG's viewBox.

For a tight export, export the artwork itself instead:

1. Select the artwork, right-click and choose Collect for Export > As Single Asset (or drag it into the Window > Asset Export panel).

2. Go to File > Export > Export for Screens and use the Assets tab, not the Artboards tab.

3. Set Format to SVG and export — the file is then generated from the collected artwork, not the full artboard.

Official doc: https://helpx.adobe.com/illustrator/using/collect-assets-export-for-screens.html

Hope that helps!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.