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 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:

  1. 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 .
  2. Tick "Align to pixel grid" for any objects that won't get distorted by it. Use pixel-preview very frequently.
  3. File > Export, ico.png, use artboards, 72ppi art-optimized
  4. File > Save a Copy, ico.svg, use artboards
  5. 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"


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?

enter image description here

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?

4/13/2017 12:46:00 PM