254

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

2

22 Answers 22

315

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
  • 53
    Unfortunately this clips images to a square. Jan 30, 2011 at 15:13
  • 10
    Ah, qlmanage -t gives the thumbnail used by Quick Look (in Finder, etc). Clever idea. Unfortunately, these thumbnails can be buggy, especially when there's text involved. Jun 6, 2011 at 8:07
  • 8
    This produces images with the svg file in the 1st quadrant. Doesn't auto crop. Trying to convert files from noun project - wish this worked.
    – Alex Cook
    Nov 12, 2012 at 20:40
  • 17
    This solution fails to take transparency into account. The tool rsvg-convert in @ahti's answer worked out before for me.
    – BenR
    May 19, 2016 at 8:30
  • 6
    Putting both width and height parameters after the -s option didn't work for me. Still crops it to a square. Very frustrating! Aug 25, 2017 at 7:45
196

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
  • 2
    This is the only one that worked for me on Mavericks and commons.wikimedia.org/wiki/… Jun 10, 2014 at 1:03
  • 14
    This is by far the best solution I've found for OS X Yosemite +1! May 9, 2015 at 15:03
  • 2
    With rsvg-convert, the resulting .png had the right dimensions, but the image came out all black instead of the original colors. With qlmanage the image is cropped to a square. Still searching for a solution :-( Aug 25, 2017 at 7:47
  • 3
    Batch converting like this find . -type f -name "*.svg" -exec bash -c 'rsvg-convert -h 800 "$0" > "$0".png' {} \;
    – MikeiLL
    Oct 30, 2019 at 18:45
  • 1
    @Ahti You're correct! I failed to note the proper package name in your answer. Your instructions work perfectly when followed correctly, and rsvg-convert works like a charm. I'm sorry for the trouble.
    – Tom
    Apr 23, 2020 at 2:09
66

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.

13
  • It sort of has a GUI, in display. Apr 26, 2010 at 4:04
  • 2
    When I installed ImageMagick with Fink, I couldn't convert svg to png - there were some errors. It turned out that I needed to install librsvg2-bin as well.
    – tst
    May 21, 2010 at 12:44
  • If librsvg2-bin isn't installed (like on OS X) this will fail. Couldn't find a way to get that installed on OS X. Aug 3, 2012 at 18:53
  • 3
    This won't work well if you want to resize the SVG as it generates blurry images.
    – Behrang
    May 23, 2013 at 3:04
  • 4
    It doesn't convert all SVG files correctly either; at least qlmanage got all the parts of the image.
    – Johan
    Feb 21, 2014 at 19:50
37

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*
8
  • this is working for me! - ihave a bigger SVG created with Inkscape
    – matheszabi
    Oct 7, 2013 at 21:56
  • This is the only method that rendered my hand-written svg correctly
    – Griffin
    Jul 31, 2014 at 23:45
  • Convert does not generate good PNG files from SVG. Using Inkscape is the best way I have found so far.
    – ol_v_er
    Feb 27, 2015 at 7:43
  • 3
    I had a problem to find files so run it as inkscape $(pwd)/logo.svg --export-png $(pwd)/logo.png
    – Andrei
    Jun 7, 2015 at 8:32
  • 2
    inkscape --export-type="png" $(ls -q) worked like Magic to export all SVG files in my directory to PNG files, with good quality! May 14, 2020 at 10:04
34

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.

4
  • 1
    Smart solution! Mar 2, 2016 at 15:07
  • 3
    This actually produces the best results for me since it renders exactly the same as the browser. Jan 26, 2017 at 1:25
  • 1
    the resulting image was very poor resolution for me
    – Michael
    Sep 22, 2017 at 16:02
  • 1
    Ingenious :) but for very large SVGs, the resolution of the resulting image is too low, as @Michael mentioned.
    – waldyrious
    Oct 23, 2018 at 10:24
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
2
  • This was the easiest one to use and remember by far. Also, the only one that produced a correct result in my case. May 9, 2017 at 22:09
  • resulting resolution wasn't great for me.
    – Michael
    Sep 22, 2017 at 16:22
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..

5
  • 3
    mogrify is also par of ImageMagick. Jun 6, 2011 at 8:19
  • Works great, but brutally slow.
    – Meekohi
    Jan 24, 2014 at 21:58
  • -1? Someone thinks this isn't helpful? What's the error? Jul 29, 2014 at 20:41
  • 3
    I'm not the one who downvoted, but worth noting is that ImageMagick stupidly converts svg to a raster image of arbitrary size before resizing, resulting in blurry output.
    – Dae
    Nov 1, 2015 at 19:47
  • Installing inkscape first (and getting it on the path) can improve conversion results. Nov 26, 2019 at 17:28
6

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
4

Try Apache Batik.

java -jar batik-rasterizer.jar FILES

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

4

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
  • 2
    For reference, this can be installed with brew cask install phantomjs. In my install, the examples folder was located in the path /usr/local/Caskroom/phantomjs/2.1.1/phantomjs-2.1.1-macosx/examples/.
    – waldyrious
    Oct 23, 2018 at 10:26
  • It's now brew install --cask phantomjs. Otherwise it still works great. It doesn't crop the image properly and it's quite slow but it's the only solution that supports embedded fonts.
    – Timmmm
    Apr 7 at 13:32
4

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
  • Would be great with an added explanation for what the command does.
    – P A N
    Jan 27, 2020 at 19:42
  • Homebrew has removed the ability to provide options so --with-librsvg is no longer valid see here github.com/Homebrew/homebrew-core/pull/36079
    – Andy
    Jun 14, 2021 at 1:05
2

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

1
  • 2
    Even with density, the conversion does not generate an image that is as sharp as a vector image. Try Apache Batik instead.
    – Behrang
    May 23, 2013 at 3:06
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
1

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

1

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!

0

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

0

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

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.

2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Blackwood
    Dec 14, 2018 at 4:09
  • @Blackwood fine, updated.
    – georgexsh
    Dec 14, 2018 at 8:11
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.

0

Python package cairosvg works best for me.

cairosvg x.svg -o x.png

Install it by
pip3 install cairosvg

0

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.