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?

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

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

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

Solution 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*

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

View more solutions

Comments

[Admin]

I found a way if you have Google Chrome... and no need to install any other things: superuser.com/questions/134679/…

[Admin]

cairosvg.org works for python3 and seems to have no issue. pip3 install cairosvg

[Ignacio Vazquez-Abrams]

It sort of has a GUI, in display.

[tst]

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.

[SomeDude]

Unfortunately this clips images to a square.

[ShreevatsaR]

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.

[ShreevatsaR]

mogrify is also par of ImageMagick.

[John Sheehan]

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.

[Parth Bharadiya]

This won't work well if you want to resize the SVG as it generates blurry images.

[Parth Bharadiya]

Even with density, the conversion does not generate an image that is as sharp as a vector image. Try Apache Batik instead.

[matheszabi]

this is working for me! - ihave a bigger SVG created with Inkscape

[Meekohi]

Works great, but brutally slow.

[Johan]

It will also not scale down the image to fit everything within the specified width.

[Johan]

It doesn't convert all SVG files correctly either; at least qlmanage got all the parts of the image.

[Aron Ahmadia]

This is the only one that worked for me on Mavericks and commons.wikimedia.org/wiki/…

[DefenestrationDay]

-1? Someone thinks this isn't helpful? What's the error?

[Griffin]

This is the only method that rendered my hand-written svg correctly

[AsTeR]

Even using -density the export is weird. I thought my SVG were of poor quality (all circles were in fact polygons) using rsvg-convert worked much better!

[ol_v_er]

Convert does not generate good PNG files from SVG. Using Inkscape is the best way I have found so far.

[Marcin]

This works for me, but creates extremely blurry files.

[Brice]

Actually this one worked, while ImageMagick's convert issued errors and failed to covert a complex SVG

[Greg Martin]

This is by far the best solution I've found for OS X Yosemite +1!

[Andrei]

I had a problem to find files so run it as inkscape $(pwd)/logo.svg --export-png $(pwd)/logo.png

[Andrei]

@Marcin @ol_v_er Add e.g. --export-dpi 600 to get higher quality

[sudo]

Any way to do this without it adding a white background?

[sudo]

This failed for some of my SVGs, strangely. The qlmanage answer worked for all of them but put a white background, which I don't want.

[sudo]

This is the only one that works for all SVGs for me. The quality seems nice, unless I'm missing something. I used -density 600.

[Ahti]

If some of your SVGs don't work with this (and you are sure the files are not faulty), consider filing a bug with the librsvg project (wiki.gnome.org/Projects/LibRsvg)

[gsc]

This answer worked for me on OS X 10.10, while the imagemagick answer didn't.

[Dae]

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.

[Lenar Hoyt]

@sudo Try normalizing the SVGs using hxnormalize from brew install html-xml-utils.

[Manu]

Smart solution!

[BenR]

This solution fails to take transparency into account. The tool rsvg-convert in @ahti's answer worked out before for me.

[Arkain]

the -s option takes dimensions in the form "-s 1920x1080" so you can specify the precise dimensions you want. It seems like the image is not clipped if you specify full dimensions.

[Jason Haslam]

This actually produces the best results for me since it renders exactly the same as the browser.

[Marko Gresak]

This was the easiest one to use and remember by far. Also, the only one that produced a correct result in my case.

[Paul-Sebastian Manole]

The best solution because it uses a very good rasterizer in terms of resolution.

[Zoë Smith]

And remember automator is your friend if you have to do a whole bunch: ask for finder items, run shell script passing input as argument, then something like PATH=/usr/local/bin:/bin export PATH for filename in "$@" do finalFilename="${filename%.svg}.png" rsvg-convert -h 300 "$filename" > "$finalFilename" done

[computingfreak]

is there any way to tell qlmanage to use a specific density? man revealed nothing.

[computingfreak]

rsvg-convert has parameters -d (x-dpi) and -p (y-dpi), to allow user to control density during export

[Erik van der Neut]

Putting both width and height parameters after the -s option didn't work for me. Still crops it to a square. Very frustrating!

[Erik van der Neut]

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 :-(

[Michael]

the resulting image was very poor resolution for me

[Michael]

resulting resolution wasn't great for me.

[theonlygusti]

transparency doesn't seem to work

[Paul Masri-Stone]

Where the SVG has overlapping semi-transparent elements, these are not rendered correctly. FWIW Affinity Photo has the same problem.

[waldyrious]

Ingenious :) but for very large SVGs, the resolution of the resulting image is too low, as @Michael mentioned.

[waldyrious]

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/e‌​xamples/.

[Blackwood]

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

[georgexsh]

@Blackwood fine, updated.

[Scott - Слава Україні]

You probably should mention that this is almost the same as  太極者無極而生’s answer.

[Dave Cameron]

For an 800kb SVG file, imagemagick has already used 15 minutes of CPU time and is still going. This is not ideal. I usually like using ImageMagick.

[MikeiLL]

Batch converting like this find . -type f -name "*.svg" -exec bash -c 'rsvg-convert -h 800 "$0" > "$0".png' {} \;

[Holly Cummins]

Installing inkscape first (and getting it on the path) can improve conversion results.

[P A N]

Would be great with an added explanation for what the command does.

[Anyany Pan]

rsvg-convert will not trim blank around png file. use convert image.png -trim output.png to trim them.

[Tom]

As of April 2020, rsvg-convert has no current release via homebrew.

[Ahti]

@Tom what do you base that on? The latest available version is 2.48.3 (according to download.gnome.org/sources/librsvg/2.48), which has been available in brew since the 10th of April, one day after it was released (github.com/Homebrew/homebrew-core/pull/52815).

[Tom]

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

[Samir]

This works on OS X Mojave with no cropping. It also outputs all of used canvas and does auto height/width trimming. I find this useful to export large canvas drawings as SVG over PNG/PDF from iPad apps, e.g., Concepts app which otherwise crash exporting larger drawings as PNG/PDF.

[Chathura Kulasinghe]

inkscape --export-type="png" $(ls -q) worked like Magic to export all SVG files in my directory to PNG files, with good quality!

[theferrit32]

I've never had issues with imagemagick on linux systems, but on mac it creates blurry or blank output

[BlkPengu]

Installation is failing for me with Error: An exception occurred within a child process: FormulaUnavailableError: No available formula with the name "/usr/local/opt/python@2/.brew/[email protected]"

[GeneCode]

dont work for me.

[stephanmg]

Never heard of this tool. Can one comment on this please? (It worked)

[cschroed]

Gradients don't work correctly.

[cschroed]

If the SVG has a border this tool will correctly capture the top and left border but will cut off the right side and bottom of the image.

[dcsan]

this doesn't seem to generate transparent backgrounds for me. everything is white. are there some options?

[Andy]

Homebrew has removed the ability to provide options so --with-librsvg is no longer valid see here github.com/Homebrew/homebrew-core/pull/36079

[Martin Braun]

The only one that worked for me on macOS Monterey without getting trash output.

[Riveascore]

Best solution, this should be the accepted answer.

[Timmmm]

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.

[Admin]

just fyi: using brave, i was able to zoom in fine and get a better resolution "screenshot"

[Admin]

Best and fastest one with transparency

[Admin]

imagmagick's convert seems to just use rsvg-convert (librsvg2-bin) under the hood.