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

Are there any command-line programs that can convert an SVG to PNG that run on macOS?

2

21 Answers

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.

13

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.

21

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.

11

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

Install Inkscape:

brew install inkscape

Convert test.svg to output.png with a width of 1024 (keep aspect ratio):

/Applications/ --export-type png --export-filename output.png -w 1024 test.svg

OLD ANSWER (doesn't work anymore with latest inkscape):

/Applications/ --export-png output.png -w 1024 -h 768 input.svg*

8

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

(and this works even if it is to convert a webp file in Chrome to png or jpg)

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">

or if you want more margin, use:

<img src="somefile.svg">

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 the screen first.

4

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

svgexport input.svg output.png

2

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

mogrify -format png *.svg

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

5

Try Apache Batik.

java -jar batik-rasterizer.jar FILES

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

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

2

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.

2

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.

3

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

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.

1

You may want to checkout svgexport:

svgexport input.svg output.png 64x
svgexport input.svg output.png 1024:1024

svgexport is a simple command-line tool and npm package that I made for exporting svg to png/jpeg. To install svgexport install npm, then run:

npm install -g svgexport

I created a function based on @seb 's answer

function svg2png() { svgFile=$1; width=$2; if [[ -z `file ${svgFile} | grep 'Scalable Vector Graphics image'` ]]; then echo "file ${svgFile} type is not SVG"; return 1; fi echo "file ${svgFile} type is SVG"; if [[ -z ${width} ]]; then echo "width not specified, using width=1024 as default"; width=1024; fi pngFile="$(echo ${svgFile} | sed "s/\.[s,S][v,V][g,G]/\.png/")"; inkscape --export-type png --export-filename ${pngFile} -w ${width} ${svgFile};
}

add this into you .bashrc or .zshrc and execute

source .bashrc
# or
source .zshrc

Usage: svg2png ./Documents/times_clocks.svg 2048

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).

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/ -z -w 80 -e "{}".png "{}" \;

png will be saved with original name *.png

wkhtmltoimage (from project wkhtmltopdf) did this convert well:

wkhtmltoimage --zoom 2 foo.svg foo.png

ImageMagick renders CJK character as blank on my mac.

2

I have started to put together a tool to provide a simplified interface to common actions.

You can convert an SVG to a PNG like this:

$ npm install @mountbuild/mouse -g
$ mouse convert input.svg -o output.png

This will create a new PNG for the SVG.

If nothing else check out the source and see how to write your own script to do this in JavaScript.

Python package cairosvg works best for me.

cairosvg x.svg -o x.png

Install it by
pip3 install cairosvg

You can use svglib:

pip3 install svglib

Code:

from svglib.svglib import svg2rlg
from reportlab.graphics import renderPM
drawing = svg2rlg('input.svg')
renderPM.drawToFile(drawing, 'output.png', fmt='PNG')

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Answer This Question