Convert SVG to transparent PNG using anti-aliasing using ImageMagick

Question

I want to convert SVG images to PNG files with a transparent background and smooth edges (using translucent pixels). Unfortunately, I can't get ImageMagick to do anti-aliasing; the edges always look awful. Here is what I tried:

convert +antialias -background transparent in.svg -resize 25x25 out.png 

Any ideas or other command line tool that I could use?

Answer 1

Inkscape will do this:

 inkscape \ --export-png=out.png --export-dpi=200 \ --export-background-opacity=0 --without-gui in.svg 

Answer 2

As a side note, I found that obtaining transparency was somewhat difficult. Instead of using transparent, I had to use it.

 convert -background none in.svg out.png 

Answer 3

Actually reading the imagemagick documentation:

-antialias

Enable / disable anti-aliasing pixel rendering when drawing fonts and lines. By default, objects (for example, text, lines, polygons, etc.) are smoothed when drawing. use + antialias to disable the addition of edge smoothing pixels. This will then reduce the number of colors added to the image, only to direct drawings. That is, no mixed colors are added when drawing such objects.

+ antialias will really disable anti-aliasing.

Answer 4

How I found out how to do this, from the methodology found here: How to convert the .eps file to high quality 1024x1024.jpg?

This is the same idea as @halfer's solution with inkscape - enable DPI first, but you can only do the same in imagemagick with the -density option.

 convert -density 200 in.svg -resize 25x25 -transparent white out.png 

Answer 5

Adding the -transparent white option solves the problem, especially in my case, because the background is not completely removed (unfortunately, there is a slight shadow). Therefore, I use IMHO a clearer solution that completely removes the background using ImageMagic:

convert -channel rgba -background "rgba(0,0,0,0)" in.svg out.png

It sets a fully transparent black color as a background through the RGBA channel.

Answer 6

I am adding a rectangular rectangle as a background. Paste CSS hide background. Then I catch its color to set the transparent ImageMagick attribute.

---

SVG file:

 <?xml version="1.0" ?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" > <defs> <style> #background { display: none; } </style> </defs> <rect id="background" x="0" y="0" width="500" height="500" fill="#e8e437"/> <!-- beginning of the sketch --> <g fill="#000" text-anchor="middle"font-size="112"> <text y="350" x="192">OK</text> </g> <!-- end of the sketch --> </svg> 

---

bash script

 #!/bin/bash BASE_DIR=$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd ) SVG_DIR="$BASE_DIR/import" PNG_DIR="$BASE_DIR/export" for f in 'ls $SVG_DIR/*.svg' do g="$PNG_DIR/$(basename "$f" .svg).png" BGCOLOR='grep 'id="background"' $f \ | sed 's/.* fill="\([^"]*\)".*/\1/'' convert $f -transparent "$BGCOLOR" $g done 

Answer 7

I get better, smoother results if I replace -resize with -scale . Then the antialias flag is antialias even needed.