The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Exporting SVG from the Command Line with SVGExport

by Ryan Irelan

A handy command line tool you can use to convert SVG files to PNG bitmap images is svgexport. It is available as a Node.js module and a command line utility.

With svgexport, we can easily pass in an SVG file–including any resizing options for the SVG viewport–and convert it to PNG, JPG, JPEG, or PDF of varying quality.

Installing svgexport

If you’ve followed along on other courses I’ve done–like the one on JavaScript Task Runners–then installing a Node module via NPM should be old hat.

npm install svgexport -g

That will install the utility globally so you have access to it anywhere.

Okay, let’s get to covertin’.

Converting One SVG to PNG

I have some new artwork in SVG format for Mijingo courses that I want to use on the site. But before I can an image I need to convert the SVG to PNG to use as fallback image (and in other instances, like email campaigns).

In this example we will convert one SVG image to a PNG. We’ll pass an explicit file and specify an output file name.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 250:324

There are a few parts to this command, let’s break it down.

svgexport [input file] [output file] [format] [quality] [input viewbox] [output size]

The first part, svgexport, is, of course, the command we are running. After that we pass it the file we want to covert (our SVG file). We need to specify the quality, too. The range is 1-100% and we’ll make it full quality at 100%.

The last two options are for sizing. Sizing options are set with the width:height pattern.

First, we specify the viewbox of the input file. According to the svgexport package instructions, the viewbox will be inferred from the source file unless we specify one. I like to be explicit in my commands, so as to leave nothing for chance, so I’m going to set the viewbox option.

Finally, we set the output size of the image. For my needs right now I need the output size to be exactly half.

Here’s the command we’ll run in a directory that contains the css3-fundamentals.svg file:

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 250:324

Let’s run that command. You should see an output similar to this:

/Users/ryan/Desktop/covers/css3-fundamentals.svg /Users/ryan/Desktop/covers/css3-fundamentals.png png 100% 0.5x 0:0:500:648 250:324

Another option is to use a scale option instead of specifying the exact height width of the final image. I know this SVG is 500x648. I want to make it half that size. Instead of specifying 500x648, I could also use 0.5x as the scale. You can see this in the output from our first command.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 0.5x

The output (both the file and what is returned on the command line) is the same as the first command. My preference is to always be explicit because if I try to pass in a larger SVG than 500x648 and use the 0.5x scale option than my final PNG will not be what I need.

However, the scale option can be handy if you need to resize multiple images of different sizes. In that case we would leave out the viewbox option and let svgexport use whatever is specified in the SVG file code.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 0.5x

This is particularly handy if you have a series of images of different sizes that you want to just scale half size.

Converting to Other Formats

svgexport also lets you export to other formats like JPG, JPEG, and PDF. It’s the same command as before but just use a different format value (pdf for example). If you leave out the file format, svgexport will default to PNG files. I like to be explicit in my commands so it’s clear what I’m doing (especially if this is part of script that I’m leaving behind for someone else). Therefore, I always specify the image format even if it’s the one that is the default. Defaults are good but not if they create confusion.

The Options Available

To get all of the options available for the svgexport command, I like to review the documentation that comes with it. You can get that by running:

svgexport

On my installation of svgexport there’s no documentation available using the man command, but just typing svgexport on its own will output the command usage.

In an upcoming tutorial I’ll cover how to script this so we can batch process SVGs in a directory, converting them all to PNG files.

If you use Inkscape, check out the tutorial on exporting SVGs with the Inkscape command line utility.

Learn more about SVG with our comprehensive course: Up and Running with SVG

Filed Under: Free Tutorials, SVG