Have you ever found yourself wanting to batch process and bulk recolor hundreds or even thousands of SVG files and just couldn't figure out how to best approach what seems to be (but really isn't) a very tedious task?
Not to worry. We'll show you exactly how you can batch recolor your SVGs in this article. So let's get right into it.
There are two ways to batch recolor your SVGs:
- Set up and use an action in Illustrator or similar software.
- Use a text editor. This method is arguably easier and much faster! That's the method we will focus on in this article.
STEP 1: Write Down The Hex Codes You Want To Replace
First, you need to know the hex codes of the colors you want to edit. If you are familiar with software like Adobe Illustrator, you can easily find the hex codes of your fills and strokes. Simply open the SVG file, make a selection, use the color picker, and copy the hex code.
Alternatively, you can use free online tools like this one to get a list of hex codes for your SVG file.
This is a collection of relatively simple SVGs that we are working with in this example, so there are only three hex codes that we need to replace. We wrote them down for convenience:
#048DB2 (the stroke).
#C3D7E2 (the light blue fill).
#FFFFFF (the white fill).
Now that we have our hex codes, we are ready to move on to the next step.
STEP 2: Put All Your SVGs In A Single Folder
For this step, all you need to do is add all the SVGs that you want to batch process into a single folder. As you can see, we are going to recolor 127 items in this example.
STEP 3: Use Sublime Text To Mass-Recolor Your SVGs
Sublime Text is our favorite text editor, here at HeyClipart. We will use it for this example, but you can do this with other text editors as well.
1. Open Sublime Text and then navigate to Find -> Find in Files...
2. Type in the hex code you want to replace in the "Find" field and the hex code you want to replace it with in the "Replace" field. In this case, we are replacing #048DB2 with #39304A.
3. Click the three dots and then select "Add Folder". You can include/exclude several folders, but in this example, we are working with a single folder.
Step 4: Click "Replace" And Save All
You are pretty much done. Simply click "Replace". You will get a small popup from Sublime Text asking you to confirm all occurrences in X amount of files (127 in this case). Click "Confirm".
As a final step, you will need to navigate to File -> Save All
Now, all you have to do is repeat the same process for the other hex codes that you want to replace. In this example, we are also replacing #C3D7E2 with #A89CBF.
And here's the result:
That's pretty cool and easy, right? Did you know about this method to batch recolor SVG files? Have you tried it? Let us know in the comments below!