Like so many other long-time designers, Adobe Illustrator is the go-to tool for creating vector-based graphics—especially icons. Unfortunately, because of Illustrator’s steep learning curve and reputation for outputting bulky, messy SVG files, it’s become a bit of a pariah for burgeoning designers. These days, there are many competing applications with flatter learning curves that rival the creative capabilities of Illustrator that produce cleaner SVG files.

Recently, I was involved in a  project where we had to consolidate and harmonize many years of icons. Just prior to starting the project, my company’s preferred production image file format for all of our applications became SVG. Because so many of the Illustrator alternatives make SVG output their priority and Illustrator had such a bad reputation for their SVG files, it made sense for me to consider replacing Illustrator in our design workflow. (It's worth noting that all of the existing icon source files were Illustrator files.) I just knew that whichever application we were to use in our workflow, the end goal was to distribute well-formed SVGs capable of being styled using CSS to the development team.

After reviewing many applications and weighing time, cost, and transition considerations, I decided to keep Adobe Illustrator as the workhorse. That determination came after identifying that just by utilizing existing features and configurations within Illustrator, it could generate SVG files with predictability that would allow for an efficient SVG-output workflow when coupled with Gulp, the streaming text-based task automation tool.

To achieve our SVG workflow goal, the Illustrator icon files would need to be updated to follow a strict build structure. Since most of our icons had been created as sets for specific applications and each set had its own source file, we needed to modify each source file so that they would comply with the follow specifications.

Adobe Illustrator Build Practices and Settings

• The artwork elements for each icon within a file must to be placed on its own Layer and its own Artboard. 
• The Layer and the Artboard need to be named according to a naming convention.
• The Artboard name will become the name of the generated SVG file and ID on the SVG element.
• The Layer name will become the classes on the SVG element.

• Each shape or element within an icon’s artwork requires a named Graphic Style applied to it. A Graphic Style should be created for each colored and non-colored (white and/or transparent) area within the icon. The Graphic Style names will be used as the CSS class names within the SVG file.
• Even negative space or background elements/space need a Graphic Style applied to it.
• Use hexadecimal #010101 (not #000000) for the black in your Graphic Style definitions. (Using #000000 results in no class assignment in the outputted SVG markup.)
• I recommend using a semantic naming convention for the Graphic Styles, like, “primary, secondary, tertiary” or “positive (pos), negative (neg)” since these will become class names.

• The “Advance settings for exported file type” for the SVG file type needs the following default settings:
• “Styling” set to “Internal CSS”
• “Object IDs” set to “Layer Names”
• Enable “Minify” and “Responsive” options

• Add a blank Layer as the bottom-most layer in your Layers panel. This blank layer is a workaround for a naming pattern inconsistency that Illustrator exhibits.
• All SVG generation must use the “Export for Screens” feature.

When these Illustrator configurations are followed strictly, they bring a predictable pattern to the SVG markup generated when using Illustrator’s “Export for Screens” feature which allows for bulk output of SVG files for all Artboards in your file. Now that Illustrator has been configured to output SVG files that follow a consistent markup pattern, a Gulp task based on that pattern can be written that can strip out the bulky markup that Illustrator adds to the SVG files and give them the ability to be styled using an external CSS.

Download this sample Adobe Illustrator file that incorporates all above setup.

Gulp and gulpfile.js Functions

I’m not going to get into how to install Gulp or how to use it since there are some great guides and tutorials already. As any installation guide will tell you, you’ll need Node.js installed first. So, once that’s all setup, you can modify your “gulpfile.js” file to do the clean up on your Illustrator-outputted SVG files. Here’s an overview of what my gulpfile.js does:

• Sets the ID on each outputted SVG element using the Artboard name.
• Sets the class(es) on each outputted SVG element using the Layer name.
• Strips out extra markup tags.
• Inserts a link tag to an external stylesheet.

Download this gulpfile.js to use as a starting point or just as is.

Workflow Structure

We setup our workflow to use a source directory (“src”) that held subdirectories named for each set of exported Illustrator SVG files. Each subdirectory was named for the application that the set of icons was created for.

src/

app01/
app02/

Cleaned up SVG files are placed into a distribution subdirectory (“dist”) named the same as the source subdirectory by the Gulp cleanup function.

dist/

app01/
app02/

My Gulp processor uses the name of the icon set (subdirectory name) as the second part of the stylesheet file name that’s added into each SVG file. For example, if the icon set is for “app01,” then the stylesheet name will be “styles-app01.css” in each SVG file. Each SVG will respond to a stylesheet that uses that name if it’s in the same directory as the SVG files. Obviously, any or all of the effects of the Gulp functions can be modified as you’d like, but this gives you an overview of our workflow and what worked for us.

Gulpfile Usage

I’ll assume that you’re going to use my gulpfile as is, so here are the simple instructions to using it. My Gulp processor is not configured to watch folders for when new or updated files and run automatically, but it could be modified easily to do that. To execute the SVG cleanup process, you’ll need to use your a command line app, like Terminal or iTerm.

Change directories to the root folder that contains your gulpfile.js file. In my example, I use the folder “icon-sag-archive.”

cd ~/icon-svg-archive/

Execute the “svg-groom” function on the target subdirectory of icon SVG files by using the -d flag with the name of that subdirectory.

gulp svg-groom -d app01

All SVG files located in the “app01” folder, will be processed, cleaned up, and versions created in the subdirectory “app01” in the “dist” directory.

In conclusion, keeping Adobe Illustrator, making the required configuration changes to the icon source files, and using Gulp to cleanup the SVG files allowed us to create a workflow that yielded a library of SVG files that fit our needs. Being able to continued to use a stride-and-true application like Illustrator saved us time having to convert our icon sources files to another application and it saved us the need to learn another tool.