Expand stroke-based SVGs in batch using an Illustrator script

- Posted in workflow - 5 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.

5 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.

  • Oscar says:

    For anyone coming across @Michael Daross’s version of the script in 2022: Here’s how you can apply it.

    1. Create a folder on your desktop named “svg-exports” (no quotes).
    2. Inside “svg-exports”, create two folders named “svgs” and “converted”.
    3. Place the SVG files you want to convert inside the “svgs” folder. Better to test with a small number of SVGs like 50-100 files.
    4. Now create a new notepad file and copy/paste the code below. Modify the path for rootFolder to fit your own path. Remember to end the path with a /
    5. Save the Notepad file on Desktop as SVG Outliner.jsx
    6. Open Illustrator and go to Files > Scripts > Other Scripts. Run the SVG Outliner.jsx
    7. Now you can open the Converted folder and watch as the processed files count up.

    “`
    // Change this to your AI files folder (Be sure to end with a /)

    var rootFolder = “/C/Users/YOURNAME/Desktop/svg-exports/”;
    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();

    “`

Leave a Reply

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