Export Illustrator Layers to SVG files

I’m currently working on an Adobe Edge job, it’s almost totally vector based, and it turned out there were few quick options for breaking Illustrator files down into multiple SVG files.

After looking around, I decided to add features to Matthew Ericson’s awesome exporter script. Adding the SVG export format was easy enough, unfortunately I ran into another problem.

The original tool was built for raster outputs, and whilst it did support EPS, each EPS file that was generated actually had all layers included (all invisible except one).
So after some reworking I got it to generate small vector SVG/EPS files, each containing only what was needed.

I also made it easier/cleaner to add new formats and added a few usability tweaks (options which don’t apply to the current output format are disabled).

Installation & Usage

Just drop this javascript file in your Illustrator scripts folder (CS6 is something like: C:\Program Files\Adobe\Adobe Illustrator CS6\Presets\en_GB\Scripts).

In Illustrator, use the File > Scripts > MultiExporter option to bring up the dialogue box, it’s all fairly self explanatory.

MultiExporterScreen

Notes

I made minimal changes to Matt’s functionality, here are his original notes with my modifications.

  • Supported formats are: PNG8, PNG24, PDF, EPS & SVG
  • You can choose whether you want to export all the artboards in the document with the currently visible layers showing, or if you want to export files for each of the layers in a document on the currently active artboard, or if you want to export a combination of all the artboards multiplied by all the layers.
  • Files are named based on their layer name. It only exports layers where their name has been changed from the default “Layer 1″, “Layer 2″ or “Artboard 1″, “Artboard 2″, etc. I removed this feature, but might add it back as a configurable option.
  • If you put a minus sign (-) in front of a layer name or artboard name, it will skip that layer or artboard. (Useful for when you no longer decide you like a particular mockup, but don’t want to delete it from the master Illustrator document.)
  • For layers only: If you put a plus sign (+) in front of a layer name, that layer will always be visible. Useful for if you want to have a layer that always appears in the background of each exported image.
  • It stores its settings in a nonvisible, nonprinting layer named “nyt_exporter_info”

  • It has an option for transparency.
  • It has an option for embedding linked imagery (EPS & SVG only).
  • It has an option for embedding fonts (EPS only).

Check out the Gist

If the panel is unusably small

This is most likely the result of an Illustrator bug affecting Dual monitor setups.
Open the script in a text editor and replace the following line:

this.dlg = new Window('dialog', 'Multi Exporter');

with the line:

this.dlg = new Window('dialog', 'Multi Exporter', undefined, {resizeable:true});

This will make the panel resizable.
(Thanks to Alexey Tcherniak for looking into this)

Edits 11/04/2013 – 8/05/2013

There were some issues with the alignment of objects when multiple artboards existed, which I’ve fixed.
Also, it now avoids outputting imagery when nothing would be included, this makes the “Artboard + Layers” output much more useful (as you’d rarely have one layer which spans across multiple artboards).
I have added the functionality to trim the exported files to their visible size (as opposed to the artboard’s size), this will allow mouse interactions to pass around the visible area to regions behind the SVG.
Fixed an issue where layers containing only invisible items (e.g. Guides) were causing an exception.
Fixed an alignment issue which appeared if the artboard had been resized after creation.
Fixed cropping issue with large layers (and Trim option)

Edit 17/05/2013

Separated the artboard and layer selection, which now allows for more fine-grain set ups.
Now allows for ‘Trimmed Edges’ functionality for all output formats.

Edit 17/07/2013 – 28/08/2013

Now you can export Illustrator layers to FXG files (versions 1.0 & 2.0)
Added an option to ignore warnings.
Fixed ‘Save & Close’ button.
Empty child layer bug fix.

Edit 6/12/2013

Added a mode to avoid visual clipping of round backgrounds.
Thanks to John Ford for the input.

Edit 7/8/2014

I’ve changed the file naming system to be much more flexible, using a token pattern instead of the prefix/suffix fields. Try it out here.

NEW VERSION

There’s a brand new version of the tool, rewritten from the ground up, it’s way more powerful and allows for multiple image formats to be generated from a single execution.
Also, it avoids the group issue that was the cause of that annoying message box.
I’ll still be offering this version, but if you get a lot of use out of it, buying the power version would be much appreciated.

Check it out at Adobe Exchange.

64 Comments

  1. Wow, thanks for updating this. It’s come on some much since I used the original. I would really love it if you could make the layer name optional(none/prefix/suffix) as it’s something that would be really useful to my workflow.

    I can’t wait to see how this develops in the future. Keep up the great work

  2. Question. I in the Adobe Exchange review for the power version, there is a comment about the exports being “LOW quality.” Is this true, or is there a way to maximize quality for good use when printing?

    • This plugin piggy-backs on the native Illustrator export functionality, so all options available in either “Save as…” or “Export” should be available in one form or another.
      Some settings (like Quality) are format specific, and need to be accessed with the “More Options” button when the format is selected.

  3. Hey Thomas,
    is this power version compatible with the latest version of Ai?

    i bought it but isn’t showing on my app.

    • Hi Diego,
      It is compatible with the latest version, I’ve sent you an email to help get it installed.

  4. Hi Thomas,

    I know this is an older post but I’m currently facing another Illustrator to SVG issues. I’m working with a new plotter, the FORCE, by knkusa.com, and it works well with SVG files created by other apps, like inkscape and Make-The-Cut, but not with Illustrator files. According to the manufacturer, Illustrator has some additional info in their SVG files which screws up the output. Is there a way to simplify the output file and make it more compliant with industry standards?

    Thanks for your help.

    • Try disabling “Preserve Editability” when you export from Illustrator.
      That should make it a fairly standard SVG file.
      That said, there are a lot of different ways to do the same thing in SVG, so potentially Illustrator is doing something that your plotter software doesn’t like.

  5. Thank youuuuuu!!!!!!!!!!! You just made my life beautiful!

  6. Thank you so much for this – it turned a morning’s work into ten minutes work and saved my sanity that day. Let me know if you’re ever in Oxford, UK – i feel like I owe you a drink or five

  7. Great – i didn’t even had to use my brain. Thanks!

  8. Hey Thomas,
    Much Appreciated ~ !
    The Script is Great and Really Helped alot, since I had to work with over 1000+ icons in 50+ AI and spit out all of the SVG, PNG and iconfont for our Library Collection.

    I am Wondering, Would You be considering to work in an added Option, where we can Input any #HEX Colors in your provided Panel and have it process / export it to that single Color ?

    There are some Linux command types + scripts that I know of; and takes all specified SVG and convert them with lightning speed.

    But Just thought it AIN’T too Cool doing that separately & (non-consistently generating the files from the same plug-in)

    Hoping to see if it would be a nice extra … My2Cent < Your thoughts ?

    Cheers
    Stacy

    • Hey Stacy,
      This would be possible for some, but not all elements in an Illustrator file. Paths and text would be possible (which I’m guessing will be the most useful).

      I might add this functionality to my paid plugin (Smart Layer Export) in the future, but not to this version (which I don’t really support any more).

  9. The current version isn’t working for me. Is there (or will there be) a CC2015 version available?

  10. ทางเข้า sbobet
    Howdy just wanted to give you a brief heads up and let you know a few of
    tthe images aren’t loading correctly. I’m not sure why but I think its
    a linking issue. I’ve tried it in two different web browsers and both show the same results.

  11. Do you know if there is a script out there (like this one), that will run an export based on my saved “views”?

    I’ve created heaps of views using
    Menu>View>New View

    And I want to export all my views, on the same artboard, to jpg, tif, png, pdf, etc.

    Any advice would be appreciated.
    Cheers,
    Jeremy

    • I’ve never seen one, although it has been requested before, so I may make a variant of my paid Exporter (Smart Layer Export) with this functionality. Keep an eye on my blog over the next few months.

  12. Is there an ETA on the update with CC 2015?
    I just found this and I’m excited to give it a try, but the Adobe Exchange link says the product not exist.

    • I think Adobe disabled all of the plugins for a little bit while they retested them, but it appears to be active now.
      I have tested with CC 2015 on OSX and Win64 and all seems to be working fine, let me know if you still can’t get it to work.

  13. Nice job. amazing tool !

    change in copy_layer

    1
    2
    3
    4
    5
    if(oldBounds && newBounds){
                        offset.x += oldBounds[0]-newBounds[0];
                        offset.y += oldBounds[3]-newBounds[3];
                        offset.norm = true;
                    }

    to

    1
    2
    3
    4
    5
    if(oldBounds && newBounds){
                        offset.x = oldBounds[0]-newBounds[0];
                        offset.y = oldBounds[3]-newBounds[3];
                        offset.norm = true;
                    }

    works for me to export SVG multy-artboard.

  14. Hi Tom,

    Thanks for your awesome work!

    Should this work with AI CS4? I get an “Error 21: undefined is not an object
    Line 546: –> if(!artboard.name.match( /^\-/ )){ ”

    (i know, i know… i really should pony up the cash and upgrade my AI…)
    but if there’s an easy fix to this so that i can run your awesome script, it would be greatly appreciated!

    best–
    Vince

    • Hey Vince,
      I’m not sure what is going wrong there, I’ve never attempted to run it in CS4. I’d love to help but I just don’t have the time to support versions that old, sorry.

  15. How do I download this as the jsx file for a mac? Newbie here!

  16. thank you so much sir for this script. usually i can save bulk layer to file using photoshop but the quality isn’t good. I try to draw several artwork and save it per layer as .PNG, the result is very good. I mean good for me because I can save my time.

  17. Hi, thank you very much for this very useful script! Been using it for two years now :)

  18. I have a bug report on the version on Adobe exchange, a weird one. If i try and type anything into the filename pattern fields, the text is input backwards. For example, I type “h” “e” “l” “l””o” and the field will show “olleh”. To type anything I have to type a letter, move the cursor, type another letter, etc.

    This happens on illustrator cs6 running on osx yosemite, and does not happen in any other illustrator inputs.

  19. Thank you so much for this Tom! One thing though, illustrator sometimes quit unexpectedly when I’m trying to export the artboards. Anyone else experiencing the same problem? Other than that it’s really freaking fantastic! 😀

  20. Thank you so much!

  21. Hey Tom! Was wondering if your Smart Layer Export (in Adobe Add-ons) supports multipage pdf export. I have a file with 2 artboards but I want both to be in a single PDF file.
    Thanks!!

  22. Great script! Thanks for providing.
    Can you add the option for export svg responsive.

    Thanks in advance!

  23. This looks amazing but I’m trying to export each layer as .jpg but with one other layer as well. So I have a layer for text above several colours, each in a different layer. I need each colour exported but with the text on it. Could you suggest a modification to do this? or is this in the too hard basket?

    • As mentioned in the Notes section, if you begin a layer name with a plus symbol (+) it will be included in all layer exports. This also applies to the paid version available at the Adobe Add Ons site.

    • Thanks a lot! …. I’ll be honest, I read as far as putting a minus in front, sorry for asking a dumb question.

  24. It keeps giving me the error “Reference Error: docRef is undefined”… help?

    I’m using the extension from adobe with illustrator CC

    • Hey Darren,
      Have you got a document open before you open the panel?

    • I do yes, I open my document, then go to scripts -> Smart Layer Export

    • I have a similar error when I do a Smart Layer Export. The error reads:
      ReferenceError: smartExport.ExportToolBuilder does not have a constructor. I’ve been using this successfully until today – so I am wondering if Illustrator CC updated behind the scene and something is imcompatible?

      Thanks!

    • I fixed the problem by re-installing the add on. I had to change my Mac account to have admin privileges to successfully install the add-on.

  25. I’m trying to buy the new script version at adobe addons. However, I get a 404 error when I try to go through the purchase process. (I hate adobe’s site!). Any chance of buying through another channel?

    • Hi Kemie,
      At the moment I haven’t listed it for sale anywhere else, sorry.
      Apparently you can use the Extensions panel from within CC apps now though, if the site isn’t working for you.

      More Info here

  26. You just saved me hours of work. You are a god.

  27. Hey Tom,

    Thanks so much for your script, I feel so much happier to work with developers now, you have taken so much tedium from my life. The ‘trim’ function is spot-on!!! Brilliant…it’s what I felt other scripts and plug-ins missed – everything should export at a standard size generally.

    How Adobe cannot keep an eye on their competitors such as Sketch – which has fantastic and easy exporting options – and not include better functionality like theirs for exporting is beyond me. You are superman as far as I’m concerned! Closing the gap between this lagging giant and it’s competitors by your skill and generosity. Bless you.

    You lil’ beauty!

    Have a nice day

    James

  28. Thanks for the script! very useful.
    It worked fine on CS6 and CC but after clean reinstall of OS X and CC it shows error 1302 no such element – http://screencast.com/t/2sdEMs8R

  29. I have a file with about 80 layers. The contents of any given layer may be grouped, a compound path, or neither and each may contain a few to 100+ paths. When I run this script, a few layers are exported and then I get a failed message: “10 layers failed across 1 artboard”. I have tired cutting back to only a few layers, rasterizing and tracing each layer, removing groups, adding groups, and compounding paths to see if I could put my finger on where the failure was occurring at without any luck. I am not terribly familiar with javascript and I was hoping you might have suggestion on what might be causing the failure.

  30. This script has saved the day! Thank you for the amazing work. I look forward to using it in the future again. Amazing!

  31. Cool idea, but man, this script takes so much longer than Matt’s. What’s the deal?

    • Matt’s script shows and hides layers then saves a file out. This doesn’t work for vector file types (which include even hidden layers in their file size) as well the ‘Trim layers’ option in my version, which requires the document to be a different size. If you’re doing non-trimmed raster exports, like Matt’s script does, then they should take approximately the same time.

  32. Hi, is there a way to avoid the -01 in the generated files?

    • I’ve updated the script to fix this issue.

    • FYI, I’m still seeing the -01 appended to generated files. Also, it seems that (at least in Illustrator CC 2014) something is odd about the layer order in the generated files. I had to disable the ZOrderMethod.BRINGFORWARD and ZOrderMethod.SENDBACKWARD calls from if(isVis) to preserve my intended layer stack order.

  33. thanks! made my morning much easier…. I’m heading over to the Adobe Exchange to pickup the other version too.

  34. Hi, I just bought plugin for Adobe Exchange and work good expect one thing what is very important for me. The saved setting doesn’t load correctly. I create a few settings and when I load from list the all options loading in fields but when I export it each time give me error. I think there is something wrong with setting loading function. There is no way to load setting and run export.

    Can you take a look on this issue please ? Thanks!

  35. Hi, I stumpled upon your script and found it very helpful for exporting pngs. However, I have some troubles with the svg export (Mac, AI CS5). Although I avoided different artboard sizes, the script seems to shift the icons from their original placement, resulting in empty pages or misplaced icons. I’d like to try your new version at Adobe Exchange, however there’s the note, that it is only compatible down to CS6. Is that true?

    • Yeah, this is a limitation of Adobe Exchange.
      It would work in CS5/CS5.5 with a few changes but I just don’t have the time to support more than the last 3 versions.

    • What a pity – sigh! But thanks for the free script anyway. Great work!

    • I’ve found a workaround: First off, I’m exporting all icons to PDFs (using the script). Afterwards I’m using an Illustrator action, that saves the single page PDFs as SVGs in batch processing.

  36. Awesome script! Saved me a ton of time. Works great on CC2014 for Mac. I’m also exporting some frame by frame stuff into edge, and this is exactly what I needed . Thanks!!

Leave a Reply

Your email address will not be published.

*

© 2016 Thomas Byrne

Theme by Anders NorenUp ↑