26. 08. 2025 Charles Callaway Documentation

Mass Converting SVGs to Transparent PNGs with ImageMagick

Last year I wrote about how to create a great animated GIF by first creating a video. In fact I used the procedure described there to generate animated GIF banners for some of our website pages.

Another similar problem, whether building a website or creating graphics to go in your videos, is converting SVG files into PNG files. If you just need to make one PNG, you’d probably just fire up a program like Inkscape and convert it by hand.

But what if you need to convert a large number of them? Say you want to change your branding color scheme and import all those new PNGs into your favorite video editor. Updating them by hand could take you all day.

So let’s look at our options for speeding things up.

Potential Solutions

We used ffmpeg for the video conversion. While it does do some image conversion, I wouldn’t recommend it for that. What are some more realistic possibilities?

Inkscape is an open source, native, GUI-centered SVG editor. It turns out it also has a command line tool (with a shell mode for multiple files). But it’s rather new, is not well documented, and doesn’t have that many features or options.
Powerpoint does a great job of changing colors, retaining transparency, and saving them straight from the context menu, but you can only save them one at a time, not en masse.
Online convertors will let you drag and drop a number of files, and typically initiate a download of a Zip file. They have a number of disadvantages though, such as a lack of privacy, upload/download speeds, and limits on the number of files. They also don’t seem to stick around very long, so you’ll have to find and learn how to use one each time.
Batch scripts that run in a shell, or scripts written in languages like Python can give you more complete control, but you’ll still have to call an underlying image processing program unless you want to get really, in-depth involved.
ImageMagick, a generic image command line tool, is not only open-source, but is a native command line program with extensive options and built-in capabilities for batch file processing.

I think you can tell we’re already leaning heavily towards ImageMagick here…

ImageMagick

Now I’m not going to say ImageMagick is the easiest solution. It has a ton of features, but that also means there’s a really steep learning curve. So I’m hoping that by figuring it out I can at least save you some time and hassle.

So what do we need that an image processor like ImageMagick can help us with?

Color and transparency: The biggest issue for this use case, the lowest bar is to take monochrome SVGs and be able to change the foreground fill color (a “path fill”) to whatever’s desired, and make the background color transparent.
Size and quality: We want the size to be whatever we want (we’re starting with a vector graphic after all) as well as the resolution, so that we can minimize aliasing. We’re not worried about compression.
Batch files: Basically we want to specify the input and output directories, and that’s it. It should automatically read in each file one by one, convert it, and save the PNG version in the output directory.

Obviously ImageMagick can do tons of other things, like rotate at arbitrary angles (-rotate X), add or subtract borders (-shave X), etc. But features aren’t the only thing. It turns out that the order of the parameters is vitally important.

Let’s explore my solution.

Let’s Do This

Let’s put our SVG files in ./svgs/ and let ./pngs/ be our output directory.

The shell command to use is mogrify (parameter explanations at this link), whose most basic syntax is:

mogrify image.svg image.png

We can add a number of options that are useful in our case:

-background <color>
-colors 2
-density 300
-fill <color>
-format <file-type>
-opaque <color>
-path <file-path>
-resize 256x256

It’s also nice that for colors we can use basically whatever a browser will take: #RGB, #RGBA, named colors, etc., and we can use none to mean transparent (default is a white background).

To switch from the SVG’s path/stroke color, you need to know how the “fill” and “opaque” options work. “opaque” refers to the color in the SVG, “fill” means the color you want to replace that with in the PNG.

Don’t try to use the antialising options, you’ll just get color bleed around the edges of your foreground color. Use the “density” and “resize” options instead. If you do it right you can get extremely lovely 1000×1000 PNGs at only 20KB.

A quick reminder that the order of the options is very important, because they’re treated almost as pipeline operators. Experiment with the order if you want to obtain some unexpected but likely useless results.

Here’s what you’ll probably want to use, though (assuming your SVGs are monochrome white foreground):

mogrify -path .\pngs -format png -fill red -opaque white -background none -colors 2 -density 300 .\svgs*.svg

Conclusion

The result with a basic approach using ImageMagick is quite satisfactory. In seconds I ended up with exactly what I wanted, all my SVGs converted to transparent PNGs in the color I wanted, in the directory I wanted.

Now whenever I need to convert SVGs, I can just paste this one line, change the details, and be done with it. No need to find a new web page convertor, or maintain a script.

If it ever needs to be improved, I would say getting it to work for multiple colors, or keeping up to date with changes to the SVG spec would probably be the things to look at (I had one SVG break because it was entirely an embedded BASE64 image).

These Solutions are Engineered by Humans

Did you like this article? Does it reflect your skills? Würth Phoenix is always looking for talented, enthusiastic individuals to help us drive our business. In fact, we’re currently hiring for many different roles here at Würth Phoenix.