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 macOS?

score 356 · Accepted Answer · answered May 17 '10 at 13:32

356

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.

answered May 17 '10 at 13:32

tst

3,756
1
17
2

score 244 · Answer 2 · edited Dec 26 '22 at 20:53

244

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.

edited Dec 26 '22 at 20:53

Senseful

4,400

answered Feb 28 '14 at 20:47

Ahti

2,549
1
14
6

score 76 · Answer 3 · edited Jun 29 '25 at 01:56

76

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

The following command would convert an SVG to PNG, after installation:

$ magick picture.svg picture.png

The original SVG isn't deleted.

edited Jun 29 '25 at 01:56

gymate

3

answered Apr 26 '10 at 02:00

Jessie

2,044

score 43 · Answer 4 · edited Mar 28 '21 at 14:27

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/Inkscape.app/Contents/MacOS/inkscape --export-type png --export-filename output.png -w 1024 test.svg

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

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

nonopolarity · Answer 5 · 2020-12-23T10:53:54.367

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:

Download or have the svg file in your hard drive, say, somefile.svg
Now, in the same folder, just make an html file tmp.html that contains this line: <img src="somefile.svg">
Now, open that html file in Google Chrome
You should see the image. Now just right click on the image and choose "Copy Image"
Go to Mac's Preview App, and choose, "File -> New from Clipboard"
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: 64vh; margin-top: 18vh; margin-left: 18vh">

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.

Ali Shakiba · Answer 6 · 2014-11-01T11:03:45.743

11

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

svgexport input.svg output.png

edited Nov 01 '14 at 11:03

answered Sep 27 '14 at 08:47

Ali Shakiba

261

score 8 · Answer 7 · answered May 11 '19 at 18:49

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

Open the .svg file in Safari.
Press alt-command-i to open the inspector.
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.

score 7 · Answer 8 · answered Apr 10 '11 at 14:12

7

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

mogrify -format png *.svg

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

answered Apr 10 '11 at 14:12

DefenestrationDay

361

score 5 · Answer 9 · answered Dec 17 '18 at 23:46

5

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.

answered Dec 17 '18 at 23:46

Alan Dong

193

score 4 · Answer 10 · answered Mar 19 '17 at 16:18

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

score 4 · Answer 11 · answered May 23 '13 at 03:05

4

Try Apache Batik.

java -jar batik-rasterizer.jar FILES

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

answered May 23 '13 at 03:05

Behrang Saeedzadeh

2,110

score 2 · Answer 12 · answered Jun 26 '15 at 02:48

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

score 1 · Answer 13 · answered Mar 02 '20 at 01:26

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

score 1 · Answer 14 · answered Dec 08 '20 at 04:31

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 &quot;file ${svgFile} type is not SVG&quot;;
    return 1;
fi

echo &quot;file ${svgFile} type is SVG&quot;;

if [[ -z ${width} ]]; then
    echo &quot;width not specified, using width=1024 as default&quot;;
    width=1024;
fi

pngFile=&quot;$(echo ${svgFile} | sed &quot;s/\.[s,S][v,V][g,G]/\.png/&quot;)&quot;;

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

score 1 · Answer 15 · edited Aug 20 '21 at 14:45

1

Python package cairosvg works best for me.

cairosvg x.svg -o x.png

Install it by
pip3 install cairosvg

edited Aug 20 '21 at 14:45

ZygD

2,577

answered Aug 20 '21 at 05:36

orange

25

score 1 · Answer 16 · answered Jan 20 '22 at 14:12

1

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

answered Jan 20 '22 at 14:12

wieczorek1990

210
2
6

score 1 · Answer 17 · answered Oct 08 '22 at 07:36

Okay, so I've found other answers somewhat interesting but not particularly awesome. I wanted to convert every single FontAwesome SVG to a 1920 wide png. But I also wanted to color grade the svg to match my branding. The cool thing about SVGs is that they are XML under the hood.

On macOS I used rsvg-convert command.

Open up the terminal (command + Space then type in terminal.

brew install librsvg

If you don't have Homebrew you'll want to install it. It simplifies installing typical packages available on linux ... but without needing to find the appropriate .pkg files.

Extract the zip or just navigate to the directory wherever you have the folders.

Create a file called, color.css and place it in base directory you're working with.

For example, if you downloaded FontAwesome and extracted it in Downloads you'd cd ~/Downloads/fontawesome-pro-5.15.4-desktop/svgs

or whatever version you moved to.

I use nano -- it's easy for me. You can use any plain text editor though.

For FontAwesome SVGs they basically have an everything color, and for duotone icons they have SVGs with a class of .fa-primary and .fa-secondary.

* { fill: #FAAF40; }
.fa-primary { fill: #FAAF40; }
.fa-secondary { fill: #AD731C; }

Open up the SVG you want to modify and see if it has special classes in it that you want to add color to that deviate from this example.

The first line says everything gets #FAAF40 if not specified; The second line is the same ... so technically it's redundant and can go away but I kept it there for my personal reference. The third line applies #AD731C; just to the fa-secondary CSS class.

find . -type f -name "*.svg" | xargs -I{} rsvg-convert -w 1920 --stylesheet=./color.css {} -o {}.png

This command does all of the magic once you have your color.css file. It looks a bit crazy to those unfamiliar with xargs ... but here's how it works.

find . -type f - name "*.svg" means look in the current directory for any file ending in .svg.

Then pipe that output to the xargs command.

xargs then takes that filename and passes it to the rsvg-convert command with arguments. the {} twice means that the filename is passed in twice. So replace {} in your head with whatever file it's going to fiddle with.

Best of luck!

score 1 · Answer 18 · answered Mar 21 '24 at 22:51

In 2024, I found the resvg project (written in Rust) to be highly efficient. I benchmarked it and found it faster than rsvg-convert on Apple Silicon M-series CPUs.

Combined with the also excellent fd, it becomes a one-liner to quickly convert a directory full of SVGs into PNGs of your desired size:

fd -t file -e svg -x resvg --height 512 {} {.}.png

score 1 · Answer 19 · edited Sep 05 '11 at 09:48

1

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.

edited Sep 05 '11 at 09:48

slhck

235,242

answered Sep 05 '11 at 08:20

BersekerBernhard

19
2

score 0 · Answer 20 · answered Apr 26 '10 at 19:16

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

georgexsh · Answer 21 · 2018-12-14T08:11:03.033

0

wkhtmltoimage (from project wkhtmltopdf) did this convert well:

wkhtmltoimage --zoom 2 foo.svg foo.png

ImageMagick renders CJK character as blank on my mac.

edited Dec 14 '18 at 08:11

answered Dec 14 '18 at 03:33

georgexsh

129

Lance Pollard · Answer 22 · 2020-07-24T21:58:34.903

0

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.

edited Jul 24 '20 at 21:58

answered Jul 23 '20 at 02:01

Lance Pollard

467
5
24

score 0 · Answer 23 · edited Apr 11 '24 at 14:54

0

Download the app from here: https://www.apache.org/dyn/closer.cgi?filename=/xmlgraphics/batik/binaries/batik-bin-1.17.tar.gz&action=download

Requires Java 8 or higher.

This script works great:

cd /path/to/batik-rasterizer-1.17.jar
for file in /path/to/files/; do
  if [ -f "$file" ]; then
    echo "$file"
    java -jar batik-rasterizer-1.17.jar "$file"
  fi
done

edited Apr 11 '24 at 14:54

ChanganAuto

1
4
18
19

answered Apr 10 '24 at 15:46

Langdon

1

score 0 · Answer 24 · answered May 02 '14 at 18:25

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

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

24 Answers24