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