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

  1. Great script. For anyone using it, note that any character in your layer name that isn’t a valid character in a Mac filename will break the export process. Rename before running.

  2. Hello.
    I have created a single AI file, including multiple workspace in it (each of them being dimensionned and named). When saving with SVG format, you can export each workspace independantly.

    each separate SVG file will be named like :
    AIfilename_Workspacename.svg

    that’s another solution which doesn’t require any external script. (for me it is enough, but I am not sure if all functions are supported though.)

  3. Hello Dear Martin LeBlanc can you help me a bit? i just did it but i don’t know where is the folder of my svg icons so where are they saved after doing it?

  4. What about CC? CC is having this option by default of exporting multiple art-boards of SVG but when i export them it shows completely blank.

  5. Hey this is great. Thanks!

    I was looking for one that would run three sizes at once with different filenames.

    Anyone have any insight on how I might adapt this script to do so?

    • Saving multiple sizes can definitely be done but you’ll need to have pretty decent JavaScript skills. You’ll also need to read through the Adobe Illustrator JavaScipt reference. Here’s the link to the CC reference. There is a different reference for each version of Illustrator – http://goo.gl/HR42Mq (Let me know if the link doesn’t work for you).

      The gist of how you would do this is have your script create each of the versions you want, update the name, then save the file. It’s not especially difficult but writing the script will take some effort.

      Another option, which would require a little less scripting but some manual work would be to simply write a script to resize the icons and artboards to a size you specify, then use Illustrator’s built-in Save, specifying SVG as the file type, and checking the Use Artboards checkbox on the Save dialog.

      The only real caveat with either approach is that if your icons are pixel-perfect at the original size, you’ll need to make sure you’re happy with how the resized versions render.

      Let me know if I can provide more info.