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