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.

81 Comments

  1. Hy Tom,
    your add-on looks great. Tried the free version, and it’s awesome, but i like the new feature of selecting the art boards that i want to export so i tried purchasing it on Adobe Exchange. Installation was ok, but when i try to run the script i keep getting 2 errors:

    Error: Invalid enumeration value
    and when i press ok

    TypeError: undefined is not an object

    It just doesn’t work…

    I am using updated illustrator 16.0.4 on cs6 on mac osx 10.7.5
    installed the add-on with adobe extension manager cs6.

    Can you help me?

    • Tom,
      thanks a lot for your time and effort. Your quick update fixed my problem and now the script is working great!

  2. Tom — Brilliant script. Saved me a world of headaches with some icons I’m working on for a webfont. Having some problems with SVG export when multiple artboards/artboard sizes are present. It looks like the script defaults to using only one artboard when exporting. This has resulted in having the majority of SVGs created being clipped out from final artwork. Short of exporting from one artboard at a time, is there any way to potentially fix this?

  3. Thank you, this script saved my day… and a whole lot of time!

  4. you are f*cking awesome.
    thank you very to save time.

  5. You are a god!

    I couldn’t get Matthew’s original script to run but your revised version runs perfectly. Mac 10.6.8 snow leopard, CS6. Thanks!

  6. Great stuff. Do you know what settings the SVG version is set to? Is it SVG 1.1?

  7. Hi Tom.

    Thank you for improving Matts script (which I used a lot). Now this is near to perfect!

    I have the same issue like “Rick – DECEMBER 14, 2013 AT 5:26 AM”:

    Working with multiple artboards all layers are exported using the uppermost artboard in the artboard-list. This is the case when trying to export a specific artboard other than the first one in the list. If I make the desired one the first in the list pre-export it´s okay.

    It´s also doing well using the default-options “All artboards, all layers” – but then the files are artboard-prefixed, which I have to remove via total commander.

    So the combination I´m looking for is “Specific artboard (e.g.2), selected items´ layer” resulting in filenames based on layers without artboard-prefix only for desired layers.

    For now I workaround this with rearranging the artboards pre-export, but if this could be fixed it would be one error-source less.

    Thank you and kind regards.

    Sascha

    • Hey Sascha,
      I do intend to make the artboard/layer selection more flexible in the future, but for now hopefully the new file naming system will get you over the line, It’s linked in the last update above (7/8/2014).

    • I´ll check it out. Thanks!

  8. I love your script!

    Is there a way, to multiexport and simultaniously flatten the artwork for each exported svg-file? My dream: By Clicking a checkbox in your export-dialog , this function would produce svg-files with just one layer.

    • I’m not sure I understand.
      Because SVG is all vectors there will always be ‘layers’ of some sort.
      The script really just hijacks the built-in svg export, so there isn’t much control over the resulting file. If there is some pre-processing that is currently available in Illustrator that you’d like done before export (e.g. using the Pathfinder or whatever), that is possible.

  9. Great script, thanks! The bug in get_layer_bounds is very annoying, I have ~90 layers that each contain 1 compound path and can’t find a way to stop this error occurring ~90 times. If I add the compound path to a child layer I still get the error.

    Any idea if this bug is documented anywhere on the Adobe forums? Anywhere I could read up a bit more? Is there a wait/timeout command that could be used instead of popping the dialog?

    • Unfortunately there is no type of wait function in JS. There is a setTimeout, but this would require significant refactoring of the code, which I don’t really have time to do at the moment.

      You could try selecting all and ungrouping everything several times before running the tool (obviously don’t save these changes). The issue is normally caused by groups which report incorrect boundas.

    • Hey Ali,
      I have just published a new version that doesn’t have this issue. It’s available from Adobe Exchange:

      https://creative.adobe.com/addons/products/2955

      It costs a very small amount, hope it helps.

  10. Thank you for this. Very useful.

  11. Hi. this is an excellent and usefull script. i only miss a way to add class names to nodes, so we can use them in CSS styling

    cheers

    • Hey Luis,
      How do you see this working?
      Which type of elements would you want to style?

  12. first of all thanks to both of you for such a wonderful script !

    here’s my contribution to windows users that are trying to export a gazillion layers and don’t have the time or patience to dismiss the dialog box – works great for me 🙂

    http://pastebin.com/q1Q7UmwC

  13. Hi, Your Script looks awesome. But im trying to make it work. im using Illustrator CS4. My problem is that i’m getting the following error message.. ” Error 21: undefined is not an object. Line: 547->if(!artboard.name.match(/^\-/)){ ”
    any idea?

    • Hi Alex,
      I haven’t tested the script on anything before CS5, so I’m not sure what could be wrong there.
      If I had more time on my hands I could look further into it but it’s not really possible at the moment, sorry.

  14. Thanks for the script, it was exactly what I was looking for. Saved me lots of time 🙂

  15. Hi,
    Excellent script! Is there any way to stop files getting ‘-01’ appended to the filename? I’m running it in the latest Illustrator CC version on Mac OSX 10.9.2.

    Thanks!

    • Maybe there is some change in CC (which I’m not using yet) but I’ve never seen this behaviour before. If you emailed me your AI file I could have a look, otherwise I’m at a loss.

    • I noticed I was getting -01 appended to my file names too, but since i was renaming everything anyways it didn’t bother me too much. I use an app called “ABetterFinderRename” to batch rename things quickly.

  16. Robert Lindgren

    March 6, 2014 at 12:27 am

    Thanks for the great script.

    I have a situation where the foreground that is static for the artboard, then a layer-group with different backgrounds (diff color). I’m not sure but there is not any way to export that with the current version of the script so that I will end up with the images with same foreground and different background?

    • If your foreground layer’s name begins with a plus symbol (+) it will be included in all exports (i.e. one for each background layer).

  17. Totally amazing script and has saved me loads of time exporting retina graphics. Thanks so much and would happily have paid for this.

  18. Great work with this script!

  19. I got this site from my friend who informed me regarding this website and now this time I am visiting this site
    and reading very informative posts at this place.

  20. Hey Tom. I cannot get the export to SVG to work right. I have 30 artboards. I want them to be exported to 30 separate SVG files. No matter what I do, I get the first SVG based of artboard one to come out with layers in it, but the other 29 are blank. I have tried every variation of the options. If i do each individually, then they come out fine. Can you tell me what I am doing wrong here. Each artboards artwork has its own layer and child layers. None crossover. Thanks.

    • Hey Rick,
      It’s difficult to say what’s wrong without having a look at your AI file.
      If you’re comfortable with it, email it over and I’ll take a look.

  21. Great work! Just what I was looking for as I needed to port an old Illustrator Layer-based Flash project into Edge. Managed half an hour wondering why SVGs pixelate when you scale them in Edge – discovered in the end that you have to use the Width/Height properties instead of the transform tool. Still, you saved me a lot of time.

    Thanks

    Paul

  22. Hi Tom – wondering if there’s a way you can create an option to export all of the selected graphics/objects into a new Illustrator file or new artboard, instead of exporting them to a directory? If exporting to a new artboard or file, + still exporting to a new directory is an option, well, that’d be fantastic.

    Asking about this per sometimes we designers need to make UI Kits (for those that don’t know, a summary of all graphics combined into one document) to hand off to clients. I’ve been creating multiple artboards and normally have to open a new file, then copy and paste all assets (either importing symbols I’ve created or manually copying and pasting) into one main document as a summary of all graphics created (the UI Kit).

    If a user checked this ‘export to new art-board or new file option’: 1) they’d all have to be placed evenly apart from one another, maybe the user could selected how many pixels apart each object would be in the the new UI Kit or maybe there’s a default 2) would be great if we had the option to include the name of the element (maybe taken from the layer name) beneath or beside it. Sometimes I include file names in UI Kits so that developers know what’s being referenced. 3) user may have to select the file dimensions.

    Thoughts on if this is possible?

    Thanks – John, using Adobe Illustrator CS6, Mac

    • Hey John,
      It’s possible to do either, although generating artboards is quite different behaviour to the current functionality, so I’m reluctant to add this into the open source tool listed here.

      Regarding exporting AI files, this is definitely doable, although considering how busy I am currently, I doubt I’ll have time to do it for at least 2 months.

      If you were interested in paying for either or both of these features please contact me via email

  23. Tom,
    I have this amazing script but i cannot get it to export the various sublayers. I have even reduced these to sequence layers and still no result. only shows i am looking to export two layers in total. What am i doing wrong in this script. I have tried to organize my layers for batch exporting some labels with various UPC’s and flavors. Instead of turning off an on each of these and deleting info i want to export only those visible layers that are common across the file and those specific elements designated for each flavor. Please advise.

    • Hey Robb,
      Sounds as if you’re trying to do something quite specific, not sure if my script will help. It currently only exports top-level layers, not sublayers.

      Also, if you want additional layers to be included in all exports, begin the layer name with a plus symbol (+).

    • Tom, Thanks for the reply. Yes i am trying to get this to happen with sub-layers. Even so CS5 maintains at least one top level layer. The way the file is setup, i have main background layer which needs to be visible on each new file, a common information layer which needs to be visible in each file, and the flavor names and upc info pertaining to each flavor in another layer. My total file count for 140 + flavors with six variations for each across 5 different sizes will net me around 4500 individual files for my client. Needless to say my desire to automate this is critical. I have to export in eps format to accommodate their specific printing software to recognize a spot color for cutting. I can now get the script to see five layers so i am trying to figure out how reduce my flavor layers to individual layers while maintaining their layer names. i have searched high and low and this is the closest thing i have found so far. I am also not a programmer so this is far beyond my technical level. Any help you can offer would be greatly appreciated.

  24. Hey Tom,

    Thanks for the reply, Tom. I’m currently looking into your recommendation but with 167 sublayers it’s damn near impossible to programmatically turn sublayers (and groups as well; some objects have compound paths and get un-merged when releasing to layers). Also, when you say “trim edges” would it trim to the edge of the artboard or to the edge of the object/layer? I’m building the font on a strict 32x32px grid and having the bounding area of the canvas retained is rather critical for alignment and positioning. Thanks again for the suggestion, I’m giving it a go manually (layer conversion) as I type this.

    -Sean

    • With ‘Trim Edges’ it exports imagery using the layer bounds, without it uses the artboard bounds.

      I’m very busy at the moment but potentially I could add “Export groups/layers one level deep” at some point (I’ve had another request for this a few days ago), I’ll keep you posted.

    • Sounds good. Another, hopefully smaller feature, could be to append a dynamically generated numeric sequence. Thoughts?

      -Sean

    • I could clarify since that last comment was a bit cryptic. I meant that the filename could have a dynamically generated numeric prefix sequence and append that to the layer name for output.

      -Sean

    • Yeah, at some point I’d like to add in a file name pattern system, with all types of tokens so all sorts of names can be generated. Again, unless I can tie this into paid work it’ll have to wait till I’m less busy.

    • Fair enough. This is my last question, promise. The artboards in the exported SVG’s end up centering around the vector object just fine but the artboard does not snap to a pixel. Is there a way to add that as a function? I’ll try and look into the modifications myself as well but I ask since I’ve had no luck.

      -Sean

  25. Hey Tom,

    This is a great script thanks for modifying the original. I do have a question/request. Is there a way to export slices to SVG? I was looking to use the artboard export method, however I am building an icon font and have more than 100 assets (167 to be exact) and splitting the file up would wreak havoc on maintenance.

    Thanks!
    -S

    • I haven’t looked into exporting slices, definitely something I could look into.

      If it’s practical, I’d recommend putting each icon in a separate top-level layer, then using the ‘Trim Edges’ mode to export have each exported image trimmed to the image bounds.

  26. Fantastic. Thanks for the additions to an already great script!

  27. Thanks! Life saver!!!! Works great, had some errors but that was because there where unconverted fonts hidden around.

    Thanks! U rock!

  28. Mr. Tom,
    Using Illustrator CS2 12.0.0. I placed the file in Illustrator’s script folder (Adobe Illustrator CS2\Presets\Scripts\) but when I attempt to execute I get the message box “Error 2: Window is undefined. Line 275 -> Window alert(‘Please delete the this.multiExporterPrefs layer and try again.’). Could you let me know what I have done incorrectly? Thanks.

    • Hey,
      I haven’t tested the plugin in anything earlier than CS5.
      I’d be surprised if it’ll ever work in CS2 simply because the capabilities of the Javascript API have probably dramatically changed since then.
      I wish I could be of more help but I doubt I’ll find the time to support older versions of Illustrator.

  29. Sorry, i’ve already found it!
    Thank you very very much!!

  30. Hi Tom,

    i really would like to use your script, because it would saves me hugh of time. But when i click on your link, i get a page with only text.. How can i save this to a jsx-file?

    I look forward to a reply. Thank you very much in advance.

    Kind regards,

    Lieke.

  31. Hi there, You have done a great job. I’ll definitely digg it and personally recommend to my friends. I am confident they’ll be benefited from this web site.

  32. Is there a way to add pdf profiles to this script? My company has ICC profiles for our printers and it would be a dream to be able to save out individual pdfs from our multi artboard files with the color profile enabled.

    • Do you mean the pdf presets from the save pdf dialog?

      It can currently save out PDFs, but it doesn’t really have enough options to make it very useful. The next natural progression for this plugin would be to have a specific option UI for each file type, which would allow for this kind of functionality.

      I don’t really have the time or need to add any more functionality at the moment. I am a freelance software developer though, so for a fee I’d happily make these changes.

  33. Vincent De OLiveira

    July 24, 2013 at 12:13 am

    Hi Tom,

    I found your tool today and it’s awesome.
    I’ve a little problem anyway: i try to export SVG files and the message ‘Illustrator visibleBounds issue workaround’ appears, but when i disable warnings messages, the generated SVG is no longer the same as before. Seems like bounds are not correctly calculated. Any idea?

    Thanks. Vincent

    • Hi Vincent,
      There appears to be a bug in Illustrator regarding getting the bounds of certain groups.

      By adding in the alert box, Illustrator has the time required to correct the bounds miscalculation, when it is disabled the miscalculation is used. Sometimes this won’t affect anything (i.e. when the bounds of other objects on the same layer completely encompass the affected object). Other times it does cause issues.

      Ideally, we’d have a process ‘chunking’ system that could be paused when the issue was detected (and restart a few milliseconds later), unfortunately I doubt I’ll have time to add that in the near future.

      If it’s practical, I’d remove the problematic groups (or replace them with child layers, which are practically the same and don’t seem to exhibit the issue).

  34. Daté TETEGAN

    July 23, 2013 at 7:01 pm

    Hi Tom,

    Very great improvement!

    But It would be so much efficient if we could get the list of document artboards and select the ones we want to export without having to change the name by adding a minus sign (-) in front of it.
    I personally use files with many artboards and i realize how painful it is to add or remove regularly the (-) sign.
    If we could have 2 columns with the list of document artboards on the left, and selected artboards on the right, it would works better.
    In the middle , different buttons like Add, Add All, Delete, Delete ALL to make the selection of artboards more easy.

    I’m very interested to get this feature, how can you manage that ?
    Can I send you a picture of what I mean ?

    Thanks,

    Daté

    • Hey Daté,
      A good suggestion but I’m not sure I’ll be able to find the time required to make such broad changes.

      Can I recommend in the meantime that you have a layer called ‘-disabled’ which you can drag layers in to when you need to disable them?

  35. A-Mazing ! You took his script and ran with it ! the added options… GOLD !
    You made my day !

  36. Håkan Save Hansson

    July 3, 2013 at 7:29 pm

    Thanks Tom! Saved my day!!

  37. Hi, does it work with sub-layers too?

  38. OMG! Dude..you’re gold!
    Just downloaded and and tried out the script and almost fell off my chair when it started doing its magic! I did expect that it will work, but not this great and smooth and amazing!
    Thank you so much, honestly, I would be ready to pay for this!
    Cheers!

  39. This script used to work wonderfully, but the most recent version doesn’t.

    Layers with a + symbol are often ignored.

    I also often find that the files are outputted as .tmp files instead of the actual file format.

    (This all happens when using EPS).

    • Adding a plus (+) symbol at the beginning of a layer makes it a layer which gets included in all other images (but doesn’t get an export of it’s own).

      I’ve tried to replicate your issue but can’t.

      Can you try again with the latest version and if it’s still happening send over the file?

  40. Hi,

    great script, thanks a lot! However, it seems to be exporting all layers, not only the ones with visibility turned on… Am I doing or understanding anything wrong or is the script not doing what it is supposed to do?

    Thanks!

    • That is the intended functionality, add a minus at the beginning of any layers you don’t want to export.

  41. Ok maybe silly on my part but when I clicked on the download link for the script it opened a text version of the script that I copied into a text file and saved as a another name other than “Multiexporter”. Reinstalling by right clicking the download link (Save Link As…) and installing it as is corrected the issue.

  42. Hi. Love the script but when I try to export files as SVG it does not process, and some of the options are greyed out. I am using CS6 v 16.0.0 if it matters.

    • Options are greyed out when the don’t apply to the selected output option. If you email me the failing illustrator file I’ll take a look.

  43. This script is brilliant. But when saving as EPS, all the layers are saved as hidden layers. Is there a way to make it so the new EPS only contains the each layer without all the other hidden layers?

    • Are you sure you’re using my version of the script? This is the functionality I added (i.e. exported vector files only contain the visible layers).

    • hey,
      thanks for the awesome script.
      i still have the same problem though (on a mac, mountain lion, CS5). it still exports all the hidden layers. they stay hidden but enlarge the filesize unnessecarily… how to disable this? i can’t find an option in the script.

      thanks a lot for your work!

    • If you’re 100% sure you’re using my version of the script (does it have the ‘Ignore Warnings’ checkbox?) then send me the Illustrator file and I can have a look (with the export settings saved into the file).

  44. Thank you, this script is the treasure!

Leave a Reply

Your email address will not be published.

*

© 2021 Thomas Byrne

Theme by Anders NorenUp ↑