Export ai to multiple svg files

in Tutorials

How to: Export multiple icons to SVG files from Adobe Illustrator

So you finally finished your amazing icon set, and want to upload it as SVG files on Iconfinder. Here is a quick tutorial (my first) that will show you, how to export multiple icons from Illustrator to SVG with a single click.

First of all, I have give credit to Tom Byrne for making the script, we’re going to use. Great work buddy!

This tutorial is short but effective. You could say that is sort of the point by scripting in the first place. It’s all about automating your workflow to be more effective and keep focus on your creativity.

Normally exporting multiple layers for something like icon sets can be quite tedious, but now it doesn’t have to be. Just take a few minutes follow these simple instructions. It will save you hours of work.

This Tutorial will be in 3 steps:
1. Preparing your illustrator file
2. Downloading & Installing the script
3. Exporting your icons
[divider line="true"]

Part 1: Preparing your illustrator file

Make sure all your icons are are in separate layers, and place them in root in the layers panel (see screenshot). An icon can have multiple sublayers, that won’t affect the export.

prepare1

Part 2: Downloading & Installing the script

destination

Download the newest version of the script from Github.

[button size="medium" url="https://gist.github.com/TomByrne/7816376/download" text="Download script"]

Now place the script in your Illustrator Scripts folder:

Mac installation
applications/adobe illustrator/presets/en_US/Scripts

Windows installation
C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts

OSB: You have to restart Illustrator after installing the script. Otherwise it won’t be visible in the menu.

Part 3: Exporting the icons

To export your icons, go to the menu: File > Scripts > MultiExporter

Export

A modal will open and present you with a lot of options for stuff like prefixing and format. Remember to select SVG as your format.

Also remember that the default filenames will be the name of your layer. So name your layers before exporting.

Screen Shot 2014-01-27 at 14.43.52

That’s it, hours of manual labor saved by a simple, but powerful script.

By the way. The icons used in this tutorial are the beautiful Flat-icons by Pix3lize.

[divider line="true"] [recent_posts]

Write a Comment

Comment