If you need to batch convert a bunch of SVG files into PNG files, look no further.
This script should do the trick.
Fast Solution
- Modify the Script to suit your needs.
npm i svgexport
node thisScript.js
- You're done!
Overview
I'll explain how this script works, so you'll have an easier time adjusting it to suit your needs. The full script is at the bottom for easier copypasta.
Imports
const svgexport = require("svgexport");
const fs = require("fs");
const path = require("path");
Settings
Set up what files, sizes, and colors you want to use.
- I'm importing files from the
/svg
directory this script is located in. - I'm setting sizes to
32, 64, 128, 256, 512
; Set it to whatever you want. - I'm setting colors to
white
,black
, and a customhex
. (This is put incolor
css property, which is then used by thefill="currentColor"
to set the color.
const inputs = fs.readdirSync("./svg");
const allColors = ["white", "black", "#357dcc"];
const allSizes = [32, 64, 128, 256, 512];
Convert
This is the function which builds an object for the svgexport
datafile array.
There's more info at the Docs for svgexport
.
svgexport
can take an input file path, some optional transforms for the svg (color, size, etc), and will output the desired file to a given path. Our output path will resolve like this: png/COLOR/SIZE/INPUT.png
. You can change this by changing the file const. ie: png/INPUT_COLOR_SIZE.png
is valid too! You'll just have all of your PNGs in the same folder with very detailed names.
const convert = (i, color, size) => {
const file = `./png/${String(color).replace(/\W/g, '')}/${String(size).replace(/\W/g, '')}/${i.replace(".svg", ".png")}`;
const dir = file.substring(0, file.lastIndexOf("/"));
// Creates directory if the directory does NOT exist
!fs.existsSync(dir) && fs.mkdirSync(dir, { recursive: true });
return {
input: [
path.resolve(__dirname, `./svg/${i}`),
`${size}:`,
`svg{width:100%;color:${color};}`,
],
output: [path.resolve(__dirname, file)],
};
};
Combine
Now we take all of our defined variations — inputs, sizes, colors
— and flatMap
them into an array. This array is the datafile
we will give to svgexport
.
const datafile = inputs.flatMap((input) =>
allColors.flatMap((color) => allSizes.flatMap((size) => convert(input, color, size)))
);
Transform SVGs into PNGs!
That's it! We just feed our datafile
to svgexport
and viola! We got our batch of PNG
s.
svgexport.render(datafile, console.log("complete"));
AFAIK svgexport
uses puppeteer
under the hood to render and export the PNG
. So this isn't a severless friendly solution. But it'll work great locally, and will likely work nicely in something like Netlify
.
Full Script
const svgexport = require("svgexport");
const fs = require("fs");
const path = require("path");
const inputs = fs.readdirSync("./svg");
const allColors = ["white", "black", "#357dcc"];
const allSizes = [32, 64, 128, 256, 512];
const convert = (i, color, size) => {
const file = `./png/${String(color).replace(/\W/g, '')}/${String(size).replace(/\W/g, '')}/${i.replace(".svg", ".png")}`;
const dir = file.substring(0, file.lastIndexOf("/"));
// Creates directory if the directory does NOT exist
!fs.existsSync(dir) && fs.mkdirSync(dir, { recursive: true });
return {
input: [
path.resolve(__dirname, `./svg/${i}`),
`${size}:`,
`svg{width:100%;color:${color};}`,
],
output: [path.resolve(__dirname, file)],
};
};
const datafile = inputs.flatMap((input) =>
allColors.flatMap((color) => allSizes.flatMap((size) => convert(input, color, size)))
);
svgexport.render(datafile, console.log("complete"));
Top comments (0)