Change stroke and/or fill color in multiple files from folder

New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

I have 9600 icons (SVG) in black. I need to change stroke and/or fill if exists in white and then again in blue. I will then have two packages once in white and once in blue. Is there a way to automate this in Adobe Illustrator without opening each single file?

TOPICS
How to, Scripting, Third party plugins, Tools

Views

196

Likes

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
Adobe Community Professional ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

you cannot edit or alter an illusrator file without opening the file in the UI. 

 

are your icons in 9600 files? or do you have several icons in each file (perhaps divided by category of some kind)?

 

it's definitely automatable, but if you have 9600 files that need to be batched, it might be slow going depending on the complexity of the files.

Likes

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
New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Thanks for your reply. Of course, I just don't want to open it manually one by one. 

Yes, there are 9600 individual files. I can separate them in smaller packages, let say 1000 in separate folders. It doesn't matter if it takes same time. It will in any case be faster as doing it manually.

Likes

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
Adobe Community Professional ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

To not open up every file, you will have to open them up as text and perform text-replacement on the contents to replace where it says fill="#000000" with fill="#FFFFFF" (black & white as an example cause I don't know what your blue is).

To do this you could try to find a text-replacement utility to batch do this, but the good news is that you can do this with Adobe ExtendScript and you can also do it with Node.js or anything that can do text-replacement in files.

Let's say you have a file with the text:

<svg><path fill="#FFFFFF" d="0 20 30 50" /></svg>

 

You can have code that does this:
var myFile = File("C:/path/put your own path here/test-svg.svg");

var contents = "";

myFile.open('r');

contents = myFile.read();

myFile.close();

var newContents = contents.replace(/#FFFFFF/g, "#000000");

myFile.open('w');

myFile.write(newContents);

myFile.close();

 

But then you have to consider that in SVG they do a short-hand for black by completely omitting the fill attribute.

 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109 252">
<path d="M670.5,254A53.5,53.5,0,1,1,617,307.5,53.561,53.561,0,0,1,670.5,254m0-1A54.5,54.5,0,1,0,725,307.5,54.5,54.5,0,0,0,670.5,253Z" transform="translate(-616 -253)"/>
<circle cx="54.5" cy="197.5" r="54.5" fill="none"/>
</svg>

 

Here, the path at the top (actual svg bottom) has a black stroke auto-put there of (1) and a black color on it too which isn't shown either. And at the circle, (which is the same path, but I didn't duplicate it, Illustrator just made one into a path when I stroked it!), it adds fill="none" - otherwise it would have no fill and it would be once again assumed black.

So even if you find a generic text-replacing utility or write your own code, you have to watch our for this and if your icons won't do with simple text-replacement procedures (you can't easily detect whether something has a fill="none" on it because it's deeply nested, etc, you can actually take it to the next level which would make it a lot easier.

 

You could write your own html local-file that uses real DOM-node-finding (like with jQuery) to quickly mass-replace your stuff and download all the new files. (Or easier, make one big text string in your html javascript of all your svgs with replaced colors and use ExtendScript to split that string and make all the files out of it.)

 

I'll add, if you are using Node.js you can just skip the local file HTML thing if you don't worry about instant visual preview or checking multiple actions over time as you replace just some things and not others manually in groups, etc, as there's available node package code that can parse html and xml and svg text into proper nodes at which point your node code would easily tell if something has a fill="none".

Likes

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
New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Thank you for your replay. Yes that is one option but just in case I have SVG files. I could also do it with CSS. But this probably won't be one time action and normaly I do not have SVG files but ai. In this case text editing is not an option. I would rather have a solution to do this within Illustrator, just like for example "Automate/Batch" in Photoshop.

Likes

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
Adobe Community Professional ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Which version of Illustrator are you using?

 

Also, it is required to provide some sample files with clear instructions that explain the modifications you are looking for.

 

Likes

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
New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

I have 25.2.1 version. Sample file doesn't really matter. As I written in my last reply I am looking for automated batch option to change stroke or fill color in multiple files from folder. And that's it. 

Likes

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
Adobe Community Professional ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Sample files and explicit instructions often/always do really matter.

 

Some contributors in this forum (including myself) have often spent a lot of time to provide appropriate solutions, just to eventually realise that they did not work properly because the questioner did not provide enough informations/instructions and sample files.

 

Likes

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
New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

LATEST

OK, here you go. Now multiplied it with 1k. Can then this be automated to change color in all files from a folder?

Likes

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