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.
August 22, 2017 at 1:30 am
Hi Thomas,
I just wanted to thank you for the awesome script. I also wanted you to know that the way that your script is writing SVGs solves a bug in IE.
I am using grumpicon to condense my SVGs into an inline stylesheet, and when submitted to the dev team of my company, they noticed that IE was rendering them in all black, and it’s a well documented bug: https://github.com/scottjehl/Device-Bugs/issues/74
However, your script writes the SVGs in a way that negates this bug, so thanks!
August 10, 2017 at 9:36 am
Hi Tom,
Thanks so much for the script:) It’s brilliant. Sorry if it’s obvious but is there any way to change the resolution of the exported files? Happy to purchase the paid version but it looks like it doesn’t work with CC2017.
August 16, 2017 at 9:22 am
Hi Paige,
Sorry, previous reply was misdirected.
The paid version is compatible with CC2017, although people do have issues installing it (thanks to factor’s outside my control).
If you do get the paid version and have issues installing it, contact me and I will be able to help.
In the paid version, all raster export targets (JPG, PNG, etc) have a scale setting, to change the target resolution.
Some of the vector targets (SVG, etc) also have a scale factor, depending on which underlying exports support this setting.
August 9, 2017 at 11:16 am
Thank you so so much!! Really appreciate it:) Worked a treat
March 12, 2017 at 7:49 am
Heya… I’ve used this script several times before and it’s been so incredibly helpful.
I wonder, though, is there a way to make it crop the SVG to the size of its clipping mask instead of the size of its contents? I have about 30 “tiles” of art in my file, each on its own layer. Each tile has text in it that runs outside of the bounds of the tile, so a clipping mask is applied. When I use this to export it seems to use the size of the contents instead of the mask, leaving me with an SVG that has a lot of extra whitespace.
Suggestions on a tweak to make it rely on the size of the clipping mask?
Thank you!
February 7, 2017 at 2:14 pm
Works great, thanks.
January 4, 2017 at 8:39 pm
I have 20 columns with 71 artboards on 20px * 20px, when using the script with all artboards it doesn’t get the right vector outline for the artboard. When I just select that faulty artboard by itself it exports the correct vector outline.. too bad.. :'(
January 9, 2017 at 6:59 pm
Sorry, this script is not supported anymore.
If you’re having issues with my paid version Smart Layer Export, let me know.
October 26, 2016 at 9:00 pm
Apologies, those images were tiny.
https://s10.postimg.org/c38fsltbd/illustrator_problem1.jpg
https://s10.postimg.org/ovwjsj4x5/illustrator_problem2.jpg
https://s10.postimg.org/40a9ha8q1/illustrator_problem3.jpg
October 26, 2016 at 8:38 pm
I recently purchased your commercial plugin thinking it would save me hours of work, however all of the ‘dropdownlist’ elements seem to be getting cut off and not displaying the majority of items or allow me to scroll. I’m not sure whether this is caused by coding, the version of Illustrator or it’s simply a bug. I’ve uploaded a screen shot to demonstrate the problem, I’d appreciate any advice on how to resolve this, my current solution is changing the ‘dropdownlist’ elements to ‘listbox’ but it’s not ideal.
OS: Windows 10 64bit
Illustrator: 2015.2.1 Release (19.2.1) 64bit
https://s14.postimg.org/n3yhires1/illustrator_problem.jpg
October 27, 2016 at 6:11 pm
Hi Adam,
This is an Illustrator bug relating to HighDPI screens in Windows.
I logged a bug report with Adobe well over a year ago, but I doubt they’ll fix it any time soon.
In the short term you can work around this by turning scaling back to 100% in Windows (In display settings). Not very practical, but it’ll work.
In the long term I will have to use different UI elements to achieve the same thing, but I’m not sure I’ll find the time to do this for a little while.
July 28, 2016 at 5:21 am
The script works very well and is useful, but I have a question. For the PDF export, is it possible to add some options for optimizing images? Like JPG compression options (resolution, quality). Thank you for the excellent work!
July 28, 2016 at 5:26 am
Or instead of adding image optimization options for PDF export, is it possible to select from the existing PDF export presets available in Illustrator? That would be even better.
July 31, 2016 at 12:46 pm
Hey, I’ve added both of these features to the next release of the paid for version of this tool (v3.16).
You’ll be able to select a PDF preset from the list provided by Illustrator (you should be able to save your own through the normal Illustrator PDF save dialog). Selecting a preset will disable the “More Options” button.
Also, many more PDF settings will be available in the PDF settings panel, which will now more closely resemble the Illustrator one (to help legibility).
You can buy the tool here:
https://creative.adobe.com/addons/products/2955
June 18, 2016 at 8:23 pm
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
May 8, 2016 at 1:20 pm
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?
May 11, 2016 at 8:56 pm
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.
April 29, 2016 at 5:18 am
Hey Thomas,
is this power version compatible with the latest version of Ai?
i bought it but isn’t showing on my app.
April 30, 2016 at 8:32 am
Hi Diego,
It is compatible with the latest version, I’ve sent you an email to help get it installed.
February 28, 2016 at 12:53 am
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.
February 29, 2016 at 7:02 pm
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.
December 5, 2015 at 2:37 am
Thank youuuuuu!!!!!!!!!!! You just made my life beautiful!
July 18, 2016 at 11:12 am
I’m gratufel you made the post. It’s cleared the air for me.
August 27, 2015 at 12:02 am
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
July 28, 2015 at 10:30 pm
Great – i didn’t even had to use my brain. Thanks!
July 15, 2015 at 4:20 pm
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
July 29, 2015 at 7:45 am
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).
June 30, 2015 at 6:24 pm
The current version isn’t working for me. Is there (or will there be) a CC2015 version available?
August 3, 2015 at 8:24 pm
You will have to reinstall after installing CC2015, the current version should work.
June 24, 2015 at 10:11 pm
ทางเข้า 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.
June 24, 2015 at 8:07 am
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
July 29, 2015 at 7:39 am
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.
June 23, 2015 at 4:18 am
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.
July 29, 2015 at 7:49 am
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.
June 17, 2015 at 9:09 pm
Nice job. amazing tool !
change in copy_layer
2
3
4
5
offset.x += oldBounds[0]-newBounds[0];
offset.y += oldBounds[3]-newBounds[3];
offset.norm = true;
}
to
2
3
4
5
offset.x = oldBounds[0]-newBounds[0];
offset.y = oldBounds[3]-newBounds[3];
offset.norm = true;
}
works for me to export SVG multy-artboard.
May 17, 2015 at 10:55 am
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
May 18, 2015 at 10:01 am
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.
May 16, 2015 at 8:36 am
How do I download this as the jsx file for a mac? Newbie here!
May 16, 2015 at 11:23 am
Right click this link and choose ‘Save link as…’ (or something similar depending on your browser):
https://gist.githubusercontent.com/TomByrne/7816376/raw/MultiExporter.jsx
May 13, 2015 at 2:29 pm
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.
May 9, 2015 at 2:19 am
Hi, thank you very much for this very useful script! Been using it for two years now 🙂
April 28, 2015 at 10:12 pm
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.
April 29, 2015 at 9:32 am
Hi Kemie,
Thanks for the feedback, this will be fixed in the next version (v3.6)
April 23, 2015 at 5:53 pm
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! 😀
April 24, 2015 at 7:59 am
Hi Haikal,
If you email me the AI file that is causing crashes I can take a look.
April 19, 2015 at 1:43 am
Thank you so much!
March 23, 2015 at 7:12 pm
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!!
March 23, 2015 at 9:01 pm
Hey Sebastian. Yeah, it does that.
March 1, 2015 at 3:30 am
Great script! Thanks for providing.
Can you add the option for export svg responsive.
Thanks in advance!
February 17, 2015 at 8:06 am
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?
February 17, 2015 at 10:22 am
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.
February 18, 2015 at 7:28 am
Thanks a lot! …. I’ll be honest, I read as far as putting a minus in front, sorry for asking a dumb question.
February 3, 2015 at 9:22 am
It keeps giving me the error “Reference Error: docRef is undefined”… help?
I’m using the extension from adobe with illustrator CC
February 3, 2015 at 11:00 am
Hey Darren,
Have you got a document open before you open the panel?
February 3, 2015 at 3:57 pm
I do yes, I open my document, then go to scripts -> Smart Layer Export
February 22, 2015 at 11:26 am
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!
February 22, 2015 at 10:26 pm
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.
January 27, 2015 at 9:23 pm
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?
January 28, 2015 at 11:34 am
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
January 14, 2015 at 1:10 am
You just saved me hours of work. You are a god.
January 9, 2015 at 9:21 pm
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
December 30, 2014 at 12:37 am
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
January 4, 2015 at 1:19 pm
Hey Audrey,
Have you got a document open when attempting to open the export panel?
November 29, 2014 at 9:37 am
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.
November 22, 2014 at 6:09 am
This script has saved the day! Thank you for the amazing work. I look forward to using it in the future again. Amazing!
November 19, 2014 at 6:53 am
Cool idea, but man, this script takes so much longer than Matt’s. What’s the deal?
November 19, 2014 at 7:25 am
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.
November 17, 2014 at 6:09 pm
Hi, is there a way to avoid the -01 in the generated files?
November 17, 2014 at 6:21 pm
I’ve updated the script to fix this issue.
January 24, 2015 at 8:12 am
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.
November 14, 2014 at 11:37 pm
thanks! made my morning much easier…. I’m heading over to the Adobe Exchange to pickup the other version too.
November 14, 2014 at 11:52 pm
Just opened the smart layer export…. great!
November 12, 2014 at 1:41 am
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!
November 12, 2014 at 8:18 am
Hi, please contact me via email and I’ll have a look into it.
November 8, 2014 at 7:16 am
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?
November 8, 2014 at 7:24 am
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.
November 8, 2014 at 8:14 am
What a pity – sigh! But thanks for the free script anyway. Great work!
November 8, 2014 at 9:20 pm
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.
October 17, 2014 at 2:28 am
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!!