Command-line application for converting SVG to PNG on Mac OS X

Question

Are there any command-line programs that can convert an SVG to PNG, that run on Mac OS X?

Edit: Dylan B had a good answer with ImageMagick. For reference, to install ImageMagick with SVG support on Mac OS X using MacPorts, do

port install imagemagick +rsvg

Answer 1

Or without installing anything:

qlmanage -t -s 1000 -o . picture.svg 

It will produce picture.svg.png that is 1000 pixels wide.

I have tested it only on OS X 10.6.3.

Answer 2

I found that for me the best tool for the job is rsvg-convert.

It can be found in brew with brew install librsvg and is used like this:

rsvg-convert -h 32 icon.svg > icon-32.png

(This example creates a 32px high png. The width is determined automatically.

Answer 3

ImageMagick is an extremely versatile command-line image editor, which would probably rival Photoshop if it had, you know, a GUI. But who needs those anyways. :P

Something like the following would convert a .svg to .png, after installation:

$ convert picture.svg picture.png

The original .svg isn't deleted.

Answer 4

Inkscape with it's Commandline-Interface produces the best results for me:

/Applications/Inkscape.app/Contents/Resources/bin/inkscape --export-png output.png -w 1024 -h 768 input.svg

Good thing is, you can specify the exact pixel size of the resulting image, without having to mess with density.

Answer 5

OK, I found a simple way to do it on the Mac if you have Google Chrome.

In one sentence, it is to see the svg image in a webpage (must be in an html file), right click on image and choose "Copy Image" and paste to the Preview app.

Steps:

1. Download or have the svg file in your hard drive, say, somefile.svg
2. Now, in the same folder, just make an html file tmp.html that contains this line: <img src="somefile.svg">
3. Now, open that html file in Google Chrome
4. You should see the image. Now just right click on the image and choose "Copy Image"
5. Go to Mac's Preview App, and choose, "File -> New from Clipboard"
6. Now File -> Save the file and you have the png file. (or other file types).

This is tested on the current Chrome (version 48.0) on Mac OS X El Capitan.

Update: I am not sure whether it is due to some restriction imposed by Google Chrome. I just try an SVG file using Chrome 58.0, and I get a tiny image from the method above. If you see this case too, you can also use

<img src="somefile.svg" style="height: 82vh; margin-top: 9vh; margin-left: 9vh">

or if you want more margin, use:

<img src="somefile.svg" style="height: 62vh; margin-top: 19vh; margin-left: 19vh">

and you will have an image on screen good enough for you to do a screenshot -- using CmdShift4 or CmdShift3 on the Mac, for example. Make sure you resize your Chrome window to the maximum allowed on screen first.

Answer 6

If you want to do many at once, you can:

mogrify -format png *.svg

There are options to resize etc on the fly, too..

Answer 7

Try Apache Batik.

java -jar batik-rasterizer.jar FILES

It also supports batch conversion and has many other useful options.

Answer 8

I have made svgexport using node/npm for this, it is cross-platform and can be as simple as:

svgexport input.svg output.png

Answer 9

You can also use phantomjs to render the svg. The advantage is that it renders it like a browser would since it's basically a headless WebKit.

Once you download it you need phantomjs (binary) and the rasterizer.js file from the examples folder.

phantomjs examples/rasterize.js Tiger.svg out.png

Answer 10

This is what I used:

brew install imagemagick --with-librsvg

Then run the following commands:

find . -type f -name "*.svg" -exec bash -c 'convert $0 $0.png' {} \; rename 's/svg\.png/png/' *

Hope it helps.

Answer 11

Yet another method without installing anything. Not in command line though.

1. Open the .svg file in Safari.
2. Press alt-command-i to open the inspector.
3. Right-click on the <svg> tag, select "Capture Screenshot". (Note that you mustn't zoom in the image.)

P.S. To enlarge the .svg image if it's too small, try opening the .svg file in text editor and append 0 to every number except in the meta-attribute. This can be done by a global regex substitution from (\d+) to $10, where $1 is the placeholder for back reference, for example.

Answer 12

I use this command on my linux. It should work for you as well.

mogrify +antialias -density 2000 -verbose -format png *.svg

I learned that without the "-density" argument, the bitmap would be very pixelized. Change the -density value to match your need.

Answer 13

ImageMagick's convert command, using some other parameters, is what did it for me. Here's my batch Bash script solution that divides the task across multiple processes to make use of all your cores! Modify as needed.

batchConvertToSVG.sh (takes number of processes as argument):

end=$(( $1 - 1 ))
for i in `seq 0 $end`;
        do
            echo Spawning helper $i of $end
                ./convertToSvgHelper.sh $i $1 &
        done 

convertToSvgHelper.sh:

n=$1
for file in ./*.svg; do
   filename=${file%.svg}
   echo converting file named $filename
   test $n -eq 0 && convert -format png -resize 74 -background transparent -density 600 $file $filename.png
   n=$((n+1))
   n=$((n%$2))
done

Answer 14

As commented previously ImageMagick does the trick. I just wanted to add a point for GraphicsMagick, an old fork of ImageMagick that has some improvements (and much less dependency bloat when installed via fink).

Answer 15

You can perform a batch conversion on an entire folder of SVG files to PNG. I used Inkscape command line interface to produce png files with a width of 80px.

find ~/desktop/toconvert '*.svg' -exec /Applications/Inkscape.app/Contents/Resources/bin/inkscape -z -w 80 -e "{}".png "{}" \;

png will be saved with original name *.png

Answer 16

wkhtmltoimage (from project wkhtmltopdf) did this convert well:

wkhtmltoimage --zoom 2 foo.svg foo.png

ImageMagick renders CJK character as blank on my mac.