Convert SVG Graphics to PNG with a Node.js Module

Have you ever searched for an image, and downloaded an SVG file, only to realize that you couldn’t use SVGs in your target application? It happens to me from time to time, and I always seem to forget how to convert SVG graphics to transparent PNG images.

For example, I might find an SVG icon file that I want to import as a custom Slack emoji. The fact that it’s SVG is awesome, because it’s infinitely scalable. Unfortunately, Slack doesn’t currently support importing SVG graphics as emojis.

Let’s take a look at a useful utility called svgexport, that provides an easy-to-use command line interface, to perform this conversion.

Installing svgexport Node.js Module

You’ll first need to make sure that Node.js and npm are installed. This is easy using the package manager for your operating system. I typically use the scoop package manager for Windows 10.

# Windows 10
scoop install nodejs

# MacOS
brew install node

# Ubuntu Linux
sudo apt-get install nodejs

Once you have Node.js and NPM installed, install the svgexport module as a global module, with npm.

npm install --global svgexport

After installing the svgexport module, you should have the svgexport command on your $PATH environment variable. On the Windows platform, the command name will technically be svgexport.cmd, however you don’t need to specify the file extension, as Windows infers it.

If you call svgexport without any arguments, the built-in help documentation will be printed out to the terminal. You can see the example in the screenshot below.

Convert SVG to a PNG Raster Image

Now that you’ve installed svgexport, let’s learn how to use it.

There aren’t all that many options for the SVG export command. The only mandatory arguments are the input and output file paths.

To convert an SVG to a PNG file, I simply run the following command.

svgexport .\Downloads\solar-icon.svg solar-icon.png

By default, the svgexport command outputs a file in png format. However, jpeg and jpg file extensions are also supported.

The resulting file looks just like I’d expect: a PNG version of the original SVG.

Change Dimensions of Resulting Raster Image

Now let’s talk about image dimensions. By default, the SVG image that I downloaded had a viewbox of 0,0,512,512. After converting the image to PNG, svgexport gave me a 512px square raster graphic. However, what if I wanted a 1024×1024 PNG instead?

Changing the dimensions of the converted image is easy, by specifying the output size argument. You can specify both the x and y dimensions, using the syntax x:y, but there’s a gotcha we’ll talk about in a second. If you’d rather specify just one dimension, you can use 1024: or :1024. svgexport will take care of calculating the proportional value for the dimension that you do not specify.

Both of these commands emit the same result for a square image.

svgexport .\Downloads\solar-icon.svg solar-icon.png :1024
svgexport .\Downloads\solar-icon.svg solar-icon.png 1024:

Now let’s talk about the “gotcha” with specifying both x:y dimensions. If you use this syntax, then the viewbox mode parameter is used to calaculate the resulting image. By default, the viewbox mode setting is set to crop instead of pad. Hence, if you specify non-proportional dimensions for your output image, then your image will be cropped.

Let’s take a look at an example of how this works.

svgexport .\Downloads\solar-icon.svg solar-icon.png 1024:512

The above command gives me the following results.

C:\Users\TrevorSullivan\Downloads\solar-icon.svg C:\Users\TrevorSullivan\solar-icon.png png 100% 2x 0:128:512:256 1024:512

As you can see, the SVG viewbox has been cropped along the y axis from 128 to 256, instead of 0 to 512. That’s because I specified a vertical resolution that is 50% the size of the horizontal resolution (x axis).

Here’s what the result looks like.

If I change the viewbox mode to pad instead of the default crop, then you’ll see extra whitespace added to the wider of the two dimensions.

svgexport .\Downloads\solar-icon.svg solar-icon.png 1024:512 pad

Even though it’s hard to tell with the White background, the resulting image is twice as wide as it is tall.

Crop an SVG Using the Input Viewbox Parameter

So far, we’ve looked at how to output a raster image (JPG or PNG) in different dimensions. However, one additional capability of svgexport is that you can specify the portion of the SVG’s viewbox that you want to render into the raster image.

For an example, let’s say I wanted to take the top-left quarter of the SVG and render just that portion into a PNG file. I can use the input viewbox parameter on svgexport to specify this. By opening the SVG file, I can see that the viewbox is 0,0,512,512. To retrieve the top-left quarter, I would specify an input viewbox of 0,0,256,256.

According to the built-in documentation for svgexport, it expects the coordinates to be separated by colons instead of commas, so let’s try it out.

<input viewbox>  <left>:<top>:<width>:<height>|<width>:<height>
                 If input viewbox is not specified it will be inferred from input file.

svgexport .\Downloads\solar-icon.svg solar-icon.png 0:0:256:256

This command produces the following result, which is exactly what I wanted.

Review and Conclusion

In this article, we’ve explored the svgexport utility that’s available on the Node Package Manager (NPM) registry. You’ve learned how to use this utility to convert an SVG image to a raster image. More advanced learnings include changing the output resolution of the raster image, and cropping the SVG viewbox.

Please subscribe to my YouTube channel, follow me on Twitter, and check out my other articles!

Attributions

Solar Panel Icon in this article was made by Swifticons from www.flaticon.com