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?

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:

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*

Answer 5

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

Answer 6

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

Answer 8

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 9

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 10

Try Apache Batik.

java -jar batik-rasterizer.jar FILES

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

Answer 11

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 12

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 13

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 14

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

Answer 15

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

Answer 16

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!

Answer 17

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 18

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 19

wkhtmltoimage (from project wkhtmltopdf) did this convert well:

wkhtmltoimage --zoom 2 foo.svg foo.png

ImageMagick renders CJK character as blank on my mac.

Answer 20

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.

Answer 21

Python package cairosvg works best for me.

cairosvg x.svg -o x.png

Install it by
pip3 install cairosvg

Answer 22

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