Expand stroke-based SVGs in batch using an Illustrator script

- Posted in workflow - 4 comments

I was in the situation where had a bunch of SVGs, but they were stroke-based, from feather-icons.com.

I don’t trust the cross-browser rendering of SVG strokes. It leads to problems when trying to color the icons with CSS as well – so I needed the expanded versions. There are over 200 icons in the set. Expanding them manually took too much time so I looked around and found a script.

Convert SVG icons that are stroke-based to expanded shapes in Illustrator. Use the Scripts functionality to run this script.

It took about 10 minutes to expand everything but at least I didn’t have to do it manually ?.

Original script found at Adobe Forums.

4 Comments

  • Yuli says:

    It worked great! I used it for 800+ icons.

    I had a few issues with Illustrator suddenly crashing (and had to process smaller batches of about 100-150) but other than that it performed awesome.

  • Thanks for posting this! I used it as a base and modified it to work a little better for my situation. I found it worked better when it opened each file, processed it, and closed it before moving on, since otherwise Illustrator would try to have hundreds of files open at once. Here’s my version:

    
    
    // Change this to your AI files folder (Be sure to end with a /)
    // var rootFolder = "~/Documents/ha/convert-icon-to-svgdefs/exports/";
    var rootFolder = "~/svg_test/";
    var srcFolder = "svgs/"
    var outputFolder = "converted/"
    
    function getFiles() {
      var path = rootFolder + srcFolder;
      var folder = new Folder(path);
      if (folder.exists) {
        return folder.getFiles("*.svg");
      } else {
        throw("Unable to find folder at " + path);
      }
    }
    
    function saveFile(destination, name, document) {
      var folder = new Folder(destination);
      if (!folder.exists) folder.create();
      var destFile = new File(destination + name);
      var options = new ExportOptionsSVG();
      document.exportFile(destFile, ExportType.SVG, options);
    }
    
    function main() {
      try {
        var files = getFiles();
        for (var i = 0; i < files.length; i++) {
          // Open each file
          var file = files[i];
          var document = app.open(file);
          document.activate();
          expandFile();
          saveFile(rootFolder + outputFolder, document.name, document);
          document.close();
        }
      } catch(e) {
        alert(e);
      }
    }
    
    function expandFile() {
      app.executeMenuCommand("selectall");
      // app.executeMenuCommand("Live Outline Stroke");
      app.executeMenuCommand("OffsetPath v22"); // Outline path
      app.executeMenuCommand("Live Pathfinder Merge"); // Outline path
      app.executeMenuCommand("expandStyle");
    }
    
    /*
     * Run script
     */
    main();
    
    
  • Mark says:

    This isn’t working. Please help.

  • David says:

    Can I get this written for PC? This isn’t working.

Leave a Reply

Your email address will not be published. Required fields are marked *