• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Expand stroke/create outline of multiple SVG

Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Hello everyone, I have more than a thousand SVG icons but unfortunately all SVG are in stroke like this image below:

Screenshot at Oct 16 14-17-34.png

and this one below is what I'm looking for:

Screenshot at Oct 16 14-18-04.png

I've tried Illustrator batch action with this step: Select - All on active artboard - Object - Expand - Save.

BUT I need to confirm (click OK) each time expand windows pop-up appear, and it's take a lot of times.

Screenshot at Oct 16 14-24-08.png

Is there any script to replace this action without clicking any pop-up window?

Thanks.

TOPICS
Scripting

Views

13.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Oct 16, 2017 Oct 16, 2017

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);

}

Replace the old save function with this one and should save the files as SVG again.

(Apologies, had activeDocument and not document though should work the same)

Votes

Translate

Translate
Adobe
Participant ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Hellos,

For this you can use the executeMenuCommand to run the expand options like so:

app.executeMenuCommand("selectall");

app.executeMenuCommand ('Live Outline Stroke');

app.executeMenuCommand ('expandStyle');

Full script that will open all SVG files within a folder then save to an output folder within the original folder.

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

var location = "/Path/To/Folder/Containing/SVG/Files/";

function getFiles() {

  var folder = new Folder(location);

  if (folder.exists) {

    return folder.getFiles("*.svg");

  } else {

    alert("Unable to find SVG Files Folder");

  }

}

function openFiles(files) {

  var documents = [];

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

    var file = files;

    documents.push(app.open(file));

  }

  return documents;

}

function saveFile(destination, name, document) {

  var folder = new Folder(destination);

  if (!folder.exists) folder.create();

  var destFile = new File(destination + name);

  document.saveAs(destFile);

}

/*

* Run script

*/

openAndExpand();

function openAndExpand() {

  try {

    var files = getFiles();

    if (files.length > 0) {

      //Open Each File

      var documents = openFiles(files);

      if (documents.length > 0) {

        //Expand Each File and Save

        for (var i = 0; i < documents.length; i++) {

          var document = documents;

          document.activate();

          expandFile();

          saveFile(location + "/output/", document.name, document);

        }

        //Close All Documents

        for (var i = 0; i < documents.length; i++) {

            documents.close();

        }

      }

    }

  } catch(e) {

    alert("Error Processing:");

    alert(e);

  }

}

function expandFile() {

  app.executeMenuCommand("selectall");

  app.executeMenuCommand ('Live Outline Stroke');

  app.executeMenuCommand ('expandStyle');

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Hi Ben, thank you for your help.

Tested your script but its save as Ai not SVG, is there any way to keep the file as SVG?

Screenshot at Oct 16 18-06-34.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Whoops, give us a moment ill change to SVG saving

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

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);

}

Replace the old save function with this one and should save the files as SVG again.

(Apologies, had activeDocument and not document though should work the same)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Thank you so much, you saved my life!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

For anyone looking for a solution in 2022:

  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. 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. 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();

 

Credit: Michael Darros

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

LATEST

The advantage of this script is that it opens each file, processes it, and closes it before moving on, as opposed to opening all 1500 SVGs in Illustrator before processing. This would surely cause freezes or crashes with no results.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines