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.


Part 2: Downloading & Installing the script


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


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



  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 :

    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.

  6. Hi.
    I would like to know if there’s a way to export through slices?
    Master Collection 5.5 illustrator’s was able to do that, but now I can’t figure out how to do it!
    Thank you.

  7. Thanks for this! Wanted to share my experience. I was separating 400 icons into individual SVG files and it took approximately 6 hours. I did not check the “ignore warnings” box, expecting that there would be few warnings, however, every icon that had grouped objects created a warning for which I had to manually click “OK” to override. So I was tethered to my computer for 6 hours without the ability to cancel the script / export or do any level of productive work in the background. Would I use this method again? Yes! But I would ensure that “ignore warnings” is checked.

  8. you are in reality a excellent webmaster. The website loading pace is amazing.
    It kind of feels that you’re doing any unique trick.
    In addition, The contents are masterwork. you’ve done a magnificent process in this matter!