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 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,
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
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
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
256, instead of
512. That’s because I specified a vertical resolution that is
50% the size of the horizontal resolution (
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
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.