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.
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 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).
It stores its settings in a nonvisible, nonprinting layer named “nyt_exporter_info”
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.
October 3, 2014 at 11:19 pm
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?
October 10, 2014 at 4:58 pm
Tom,
thanks a lot for your time and effort. Your quick update fixed my problem and now the script is working great!
August 28, 2014 at 1:19 am
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?
August 20, 2014 at 5:54 pm
Thank you, this script saved my day… and a whole lot of time!
August 20, 2014 at 6:53 am
you are f*cking awesome.
thank you very to save time.
August 15, 2014 at 3:46 am
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!
August 6, 2014 at 4:42 pm
Broken in CC 2014.
August 7, 2014 at 11:58 pm
Works for me on Windows, are you on OSX?
July 31, 2014 at 7:02 am
Great stuff. Do you know what settings the SVG version is set to? Is it SVG 1.1?
August 3, 2014 at 4:18 pm
Hey Jon, yeah, it’s v1.1, it just uses the exporter that is used when you use Save As > SVG
July 21, 2014 at 11:17 pm
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
August 8, 2014 at 12:06 am
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).
August 8, 2014 at 4:26 pm
I´ll check it out. Thanks!
July 18, 2014 at 6:21 am
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.
July 18, 2014 at 8:40 am
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.
June 18, 2014 at 7:18 pm
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?
June 18, 2014 at 7:23 pm
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.
August 25, 2014 at 10:28 pm
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.
May 16, 2014 at 4:18 am
Thank you for this. Very useful.
May 11, 2014 at 8:16 am
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
May 12, 2014 at 9:28 am
Hey Luis,
How do you see this working?
Which type of elements would you want to style?
May 3, 2014 at 5:33 am
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
April 6, 2014 at 4:21 am
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?
April 7, 2014 at 1:40 pm
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.
March 21, 2014 at 4:03 am
Thanks for the script, it was exactly what I was looking for. Saved me lots of time 🙂
March 14, 2014 at 9:29 pm
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!
March 16, 2014 at 10:02 am
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.
March 21, 2014 at 4:05 am
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.
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?
March 6, 2014 at 8:41 am
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).
January 19, 2014 at 6:17 am
Totally amazing script and has saved me loads of time exporting retina graphics. Thanks so much and would happily have paid for this.
January 21, 2014 at 9:04 pm
No problem, glad it was helpful.
January 14, 2014 at 7:34 am
Awesome, many thanks
January 13, 2014 at 7:53 pm
Great work with this script!
January 1, 2014 at 12:57 am
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.
December 14, 2013 at 5:26 am
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.
December 14, 2013 at 11:13 am
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.
December 12, 2013 at 12:53 pm
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
October 30, 2013 at 12:58 pm
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
October 30, 2013 at 3:44 pm
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
October 21, 2013 at 6:32 am
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.
October 21, 2013 at 7:17 am
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 (+).
October 25, 2013 at 1:43 pm
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.
September 27, 2013 at 8:25 am
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
September 27, 2013 at 9:10 am
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.
September 28, 2013 at 7:03 am
Sounds good. Another, hopefully smaller feature, could be to append a dynamically generated numeric sequence. Thoughts?
-Sean
September 28, 2013 at 7:11 am
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
September 28, 2013 at 9:52 am
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.
October 1, 2013 at 7:43 am
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
September 24, 2013 at 3:19 am
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
September 24, 2013 at 9:10 am
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.
September 21, 2013 at 6:21 pm
Fantastic. Thanks for the additions to an already great script!
September 20, 2013 at 1:39 am
Thanks! Life saver!!!! Works great, had some errors but that was because there where unconverted fonts hidden around.
Thanks! U rock!
September 15, 2013 at 6:40 am
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.
September 15, 2013 at 4:41 pm
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.
August 2, 2013 at 6:59 am
Sorry, i’ve already found it!
Thank you very very much!!
August 2, 2013 at 6:57 am
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.
July 28, 2013 at 3:02 am
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.
July 25, 2013 at 3:20 am
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.
July 25, 2013 at 9:18 pm
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.
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
July 24, 2013 at 3:04 pm
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).
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é
July 24, 2013 at 2:57 pm
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?
July 20, 2013 at 2:18 pm
A-Mazing ! You took his script and ran with it ! the added options… GOLD !
You made my day !
July 3, 2013 at 7:29 pm
Thanks Tom! Saved my day!!
May 30, 2013 at 7:47 pm
Hi, does it work with sub-layers too?
June 28, 2013 at 7:19 pm
Only the root layers get their own export, child layers are included in these exports.
May 27, 2013 at 9:45 pm
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!
May 15, 2013 at 1:13 am
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).
May 17, 2013 at 4:45 pm
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?
May 13, 2013 at 8:02 pm
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!
May 17, 2013 at 4:36 pm
That is the intended functionality, add a minus at the beginning of any layers you don’t want to export.
May 5, 2013 at 4:33 am
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.
May 4, 2013 at 2:19 am
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.
May 5, 2013 at 12:25 pm
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.
May 1, 2013 at 7:52 pm
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?
May 5, 2013 at 12:30 pm
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).
August 14, 2013 at 12:30 am
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!
August 14, 2013 at 9:31 am
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).
April 24, 2013 at 11:43 pm
Thank you, this script is the treasure!