Saving a .svg with a transparent background (like a .png) and preserving editing capabilities

[blp92]

I'm working with illustrator to create a cadre of icons that I'd like to use on a web page. I've been reading a lot up on the various methods for saving and preserving editing capabilities as found here: https://helpx.adobe.com/illustrator/using/saving-artwork.html​, however I'm still confused.

I followed the directions to save as a .svg and preserve the editing capabilities, but when I open the object in firefox to test it out it looks as if the entire artboard is saved along with the image, as I'm making a little design that's contained in a 100x100 pixel circle and when I open the browser that circle is centered in the middle of the page as it is in the center of the artboard.

I tried also to select solely the circle and the font contained within the circle and save with the "export selected" option, however that still seems like I'm getting the background of the circle (despite me having the circle fill option to "none"), and furthermore it loses the preserve editing capabilities it seems because when I opened one of these to change around some of the color it did not allow me to do so.

What I want is to be able to save a .svg file so that it is just the objects that I've put on the artboard, with a transparent background (à la .png), with the ability to still go back and edit the image afterwards. Is this possible?

[Monika Gause]

SVG is not suitable for roundtripping in Illustrator.

You will need to save an AI file for editing and one (or a couple of - depending on how you want to incorporate it in your HTML code) SVG for putting on the web.

[blp92]

I think I understand what you're saying, but a quick question - do I need to save a separate AI file if I save a .svg with "preserve editing capabilities" checked? Also, what does roundtripping mean? Thanks for the help!

[Monika Gause]

Roundtripping means:

You save an SVG, then edit it in a different application (which is quite common for SVG to optimize, add styling, interaction or animation). Then open again in Illustrator.

When you do this, all your changes made in other apps will be lost.

Once you open and edit the SVG in another app, you should better not go back to Illustrator or you risk losing a lot of work.

Also: once you open and optimize a "preserve editing" SVG in another app, the editing capabiities will likely be lost as well.

Illustrator embeds a complete AI file in the SVG when you save with "editing capabilties". This blows up filesizes. You don't want to do that. Instead you want two files: the work file as an AI and the SVG to optimize, style, add interactivity and finally put on the web.

[blp92]

Gotcha.

How about being able to save the .svg so that it's output is similar to a .png. Right now my saved .svg files are all centered in the middle of an artboard despite me only exporting the selected objects (sans artboard)?

[Monika Gause · Accepted solution]

You have one artboard in the file?

Then you can use either the export for screens panel.

Adobe Illustrator’s Export for Screens Saves You Time – Big Time | Creative Cloud blog by Adobe

or create artbaords for each icon.

Or use a sprite sheet. It creates fewer server queries.

But you need to address this in your HTML differently.