Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

I am using this command to generate a sharp 512px wide version of an SVG file that I have:

convert -geometry 256 pinterest.svg pinterest.png

This is the source file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M8,0C3.582,0,0,3.582,0,8c0,3.275,1.97,6.09,4.789,7.327c-0.022-0.559-0.005-1.229,0.139-1.837
        c0.154-0.649,1.029-4.359,1.029-4.359s-0.255-0.51-0.255-1.266c0-1.186,0.687-2.071,1.542-2.071c0.729,0,1.08,0.547,1.08,1.201
        c0,0.73-0.467,1.825-0.707,2.838c-0.2,0.85,0.426,1.541,1.262,1.541c1.515,0,2.537-1.947,2.537-4.253
        c0-1.753-1.181-3.066-3.329-3.066c-2.427,0-3.938,1.81-3.938,3.831c0,0.697,0.205,1.188,0.528,1.57
        C4.824,9.631,4.845,9.7,4.792,9.902c-0.039,0.147-0.126,0.502-0.163,0.643c-0.054,0.202-0.218,0.274-0.401,0.199
        C3.11,10.289,2.59,9.064,2.59,7.688c0-2.272,1.916-4.997,5.718-4.997c3.053,0,5.065,2.21,5.065,4.582
        c0,3.139-1.746,5.482-4.317,5.482c-0.864,0-1.677-0.467-1.955-0.996c0,0-0.464,1.844-0.562,2.199
        c-0.17,0.616-0.502,1.232-0.805,1.713C6.452,15.885,7.213,16,8,16c4.418,0,8-3.582,8-8S12.418,0,8,0z"/>
</svg>

However it produces a blurry PNG:

Pinterest

As my source is a vector illustration, I was expecting to get a sharp image. Is there a way to do so?

share|improve this question
1  
The problem is the width="16px" height="16px" in the SVG file. Try changing the ImageMagick command to convert -resize 3200% pinterest.svg pinterest.png for a 512x512 image. Not sure if you'll need a -geometry 512 too or not. –  martineau May 23 '13 at 2:41
    
That didn't work either. I tried it with and without -geometry. It produces a blurry image. Even -density doesn't work. However I managed to achieve my desired results using Apache Batik. –  0xcafebabe May 23 '13 at 5:55
    
A slightly different approach might be something like what is described in this answer. –  martineau May 23 '13 at 7:02

2 Answers 2

I had the same problem, but I sort of went around it by setting the density first.

for %f in (*.svg) do (convert -antialias -background transparent -density 600 -resize 1024x1024 %f %~nf.png)

share|improve this answer

I didn't find a way to solve this issue using ImageMagick, but Apache Batik's rasterize script can be used to convert and resize the SVG to PNG in a lossless fashion.

java -jar batik-rasterizer.jar samples/batikFX.svg

See here for more information.

share|improve this answer
1  
Just a nitpick, but it really doesn't make sense to call a conversion from vector to raster graphics "lossless" -- an image file is a completely different representation and will always be an approximation of the graphics defined in vector format. –  martineau May 23 '13 at 7:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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