How to Batch Export Hundreds of Illustrator Files to SVG

If you’ve ever designed icons in multiple colors and had a developer tell you they look great, the development team needs them as SVGs. You might get off that Zoom call and ask yourself how long it will take to convert your Illustrator files to SVGs. You created over a hundred icons with multiple layers as colors.

If you hire an intern, you might get all those icons exported as SVGs in a few days, but that’s not worth an intern’s time. I wrote an Illustrator script that will do this for us over a coffee run.

Quick Links:

• GitHub Repository: https://github.com/kostimarko/Adobe-Scripts/blob/master/Illustrator/Layers_To_SVG.js

• Adobe Illustrator Scripting Guide: https://ai-scripting.docsforadobe.dev/

Shut up and code

Firstly, declare global variables necessary for the script’s operations:

var destFolder, sourceFolder, files, fileType, sourceDoc, svgSaveOpts, doc, layers;

We’ll have to set the source folder where your files live through a native Illustrator dialog

sourceFolder = Folder.selectDialog( 'Select the folder with Illustrator files you want to convert to SVG', '~' );

The init() houses the rest of the functions to launch after you’ve selected where your files live.

// Function that sets up the exporting process
function init(){

	// Check to see if sourceFolder has any files in it
	if(sourceFolder != null){
		
		// Create new array for files to be stored
		files =  new Array();

		// Only use file types that are illustrator files
		fileType = "*.ai";

		// Files get save with all of the files in the sourceFolder
		files = sourceFolder.getFiles(fileType);

		// Check to see if there are any files in the folder
		if(files.length > 0){

			// Ask for a destination folder
			destFolder = Folder.selectDialog('Select the folder you want to export files to', '~');

			// Loop through files
			for(var i = 0; i < files.length; i++){

				// Save the open file and properties to sourceDoc
				sourceDoc = app.open(files[i])

				doc = app.activeDocument;

				hideAllLayers();
				exportLayers();
				sourceDoc.close(SaveOptions.DONOTSAVECHANGES);
			}
		} else {
			alert('There is nothing here')
		}


	} else {
		alert('There are no files here')
	}

}

We need to do some checks to ensure there are files in the folder, make sure they’re Illustrator files, and then ask where to save them. The script then opens Illustrator to a file, runs hideAllLayers() THEN exportLayers() only to finally close the file without saving changes.

function hideAllLayers(){
	// Loop through doc layers and turn them off
	for(var l = 0; l < doc.layers.length; l++){
		doc.layers[l].visible = false;
	}
}

We have to turn off all the layers so that as we iterate through them, we can export them one at a time before the script closes.

function exportLayers(){
	for(var e = 0; e< doc.layers.length; e++){
		
		// Set the selected layer on
		doc.layers[e].visible = true;
		// Store layername
		var layerName = doc.layers[e].name;
		
		// Function returns a new file name
		 var targetFile = getNewName(layerName);
		 
		// Function returns SVG save options
		svgSaveOpts = getSVGOptions();

		// Save SVG
		doc.exportFile(targetFile,ExportType.SVG,svgSaveOpts);

		// Turn selected layer off
		doc.layers[e].visible = false;
	}
}

We iterate through the file’s layers, making each visible, creating a new file name, setting the SVG save options, and then exporting the file as an SVG. We then turn off the current layer to iterate through the rest of the layers.

function getNewName(layerName){
	// Local Variables
	var docName;

	// Set docName to the source doc name
	docName = sourceDoc.name;

	// Set newName to empty string
	var newName = "";

	// Get the last underscore in the document name
	var underscore = docName.lastIndexOf('_');

	// Set newName to the docName from the first char to the last underscore
	newName += docName.substring(0,underscore);
	
	// Set newName to underscore + layerName
	newName += '_' + layerName;

	// Save in file at destFolder and newName
	saveInFile = new File(destFolder + '/' + newName);
	
	// Return saveInFile that creates file at folder path
	return saveInFile;

}

The getNewName() creates a new file name based on the layer name and the current document name. Some magic is at play here; I’m not sure why it works or is needed, but without creating a new substring to name your SVG icon, you’ll have document names overwritten.

function getSVGOptions(){
	var exportOpts =  new ExportOptionsSVG();

	return exportOpts;
}

I don’t use that many SVG export options, but I set this up just in case I needed to update the export options for a different project.

To save all that time, you’ll need to add the script to your Illustrator scripts and run it. If you’ve never run an Illustrator script, read more here: https://ai-scripting.docsforadobe.dev/introduction/executingScripts.html.