: Best practices for a file of icons in Illustrator that can export perfectly to both PNG and SVG? I'm using Adobe Illustrator to maintain a set of icons for a desktop application. Whenever I

Posted in: #AdobeIllustrator #Icon #Png #Svg

I'm using Adobe Illustrator to maintain a set of icons for a desktop application. Whenever I update them, I need to export them both to SVG and to a minimum-resolution PNG that matches the pixel preview that Illustrator shows me. (Our minimum is typically either 16px or 12px high, so the View > Pixel Preview feature has been a huge help.) The goal is to gradually transition to a more scalable UI.

Artboards seem to be the approach Adobe is promoting, especially now that slices can't be easily saved as SVG. So this is what I'm currently doing:

Maintain a grid of artboards (mostly 16x16 and 12x12 px) with 32px separating each one's top-left corner from the four adjacent top-left corners. Give each artboard a unique name such as add_user_mouseover .
Tick "Align to pixel grid" for any objects that won't get distorted by it. Use pixel-preview very frequently.
File > Export, ico.png, use artboards, 72ppi art-optimized
File > Save a Copy, ico.svg, use artboards
Move the resulting files into appropriate subfolders (manually or via a BATch file).

Having to save twice isn't a big deal. It is annoying, though, that I have to provide a name such as "ico", so the resulting files are named ico_add_user_mouseover.png , ico_add_user_mouseover.svg , etc. My workaround for now is a Windows BATch file that removes four characters:

REM If Illustrator adds unwanted prefixes, this can remove them.
REM Only works if the initial Name part is three characters long.

ren "???_*.png" "////*.png"
ren "???_*.svg" "////*.svg"

pause

Is there a way to avoid the prefix in the first place? Or is my current workflow the best I can expect, without resorting to a script such as MultiExporter ?

Clean SVGs: I'm using broad layers such as "background" and "box", so I'd rather not have one layer per icon, though I'm willing to if that is the best practice. However, I wouldn't want to base too much on layers since they seem to make the SVGs less compatible. So far, reading and testing has led me to believe I should do this:

Avoid strokes: convert to paths, so you can use fill instead.
Avoid font text: convert to paths. (Keep the original text in a hidden layer?) Or, strictly use "web fonts"?
Avoid special Illustrator formatting such as transforms.

That's all I've been able to do 100% consistently. How many of the following are also helpful?

Avoid using symbols. (Or at least, using black ones and recoloring them gives me ugly, overly-dark renderings. So does having a black object covered completely by an opaque light object. Grr.)
Avoid layers? I.e. merge down to one layer, maybe even one path?
Ideally, fill with nothing, or with opaque black only. Avoid any other fills if you want to be able to easily recolor using CSS.
Optionally, tweak various settings in the save dialog to make the SVGs more web-friendly ( SVG optimization practices when drawing in Illustrator , Export SVG for the web with Illustrator CC )

Layers (extra credit): I've been using copy/paste to create separately-named icons for "_mouseover" and "_disabled" states, but in some all-SVG future I wonder if this could be accomplished by hiding/showing layers in a single SVG. Probably pie-in-the-sky, right?

TIP: Illustrator's "global colors" feature is great here for simplifying any tweaking of colors across the whole file, such as the gray and two blues shown here.

Sprite sheets (extra credit): I currently do not need to create sprite sheets and likely won't ever have to, but a solution that's compatible with that might help others who come here. Maybe separating the artboards' top-left corners by 100px instead would be more flexible and human-friendly?