Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I have high-quality SVG card images, but they drastically lose their quality when I downsize them. I have tried two ways of rendering cards (using Inkscape and Imagemagics):

1) Render SVG to high-res PNG and resize it then:

inkscape -D --export-png=QS1024.png --export-width=1024 QS.svg
convert QS1024.png -filter Lanczos -sampling-factor 1x1 -resize 71x QS71.png

2) Render SVG to image of proper size at once:

inkscape -D --export-png=QS71.png --export-width=71 QS.svg

Both approaches generate blurry card images, which looks even worse than old Windows cards. What are the best way to generate smaller card images from SVG sources and not to loose their quality a lot?

UPDATE: I am using Inkscape to render SVG -> PNG and ImageMagick then to downsize PNG. I've tried using convert -resize with couple of filters (Lanczos/Mitchell/etc), but result was pretty much the same.

Original: i.stack.imgur.com/O7mcY.png

71x raster: i.stack.imgur.com/btnaL.png

share|improve this question
4  
You might want to post some examples of what you want and what you're getting. Anyway, are you using Inkscape or ImageMagick for the actual rendering? (I'm asking because ImageMagick's SVG rendering is pretty crappy. Even rsvg is better.) –  Ilmari Karonen Dec 11 '12 at 11:09
    
There are also multiple methods of downsizing a PNG; which one are you using? –  Liosan Dec 11 '12 at 11:47
    
@user can you share original picture, and the down-sized image? –  Ali.S Dec 11 '12 at 12:21
1  
Ok, I'm not really the best person to be judging images, but... aren't those SVGs just too detailed, too full of fancy small lines, for being rendered at a small scale? –  Liosan Dec 11 '12 at 13:49
1  
I agree with @Liosan. Instead of trying to resize the images to come out looking acceptable, you may want to display a less detailed version instead that is better suited for rendering at a low resolution. –  Marcks Thomas Dec 11 '12 at 15:59
show 6 more comments

1 Answer

up vote 7 down vote accepted

For best quality results, you should probably first render the SVG at high resolution and then scale it down, using a good scaling algorithm. For example, here's the result I got by taking your 256 × 357 px image and scaling it down to 71 × 99 pixels in GIMP using Lanczos3 resampling:

Queen of Spades, 71 x 99 px, Lanczos3 resampling in GIMP

It looks noticably sharper than the version you got using ImageMagick:

Queen of Spades, 71 x 99 px, ImageMagick

I'm not sure why the difference should be so noticeable, since your ImageMagick command line also seems to specify Lanczos resampling, but it is. Perhaps ImageMagick is using some different variant of the algorithm than GIMP, or perhaps it simply doesn't use it when scaling images down.

(The GIMP version does suffer from one big problem: the bottom edge is cut off. To avoid such edge issues, it's often a good idea to render your images with a small amount of margin around them.)

The remaining "blurriness" in the images is due to the fact that the vertical and horizontal lines are not perfectly pixel-aligned. I wrote an answer about this at the Graphic Design Stack Exchange before, so I'll just link to it from here. While manually editing this many images is probably not practical (although I guess you could do it at least for the repetitive parts such as the card edges), you might want to give the PixelSnap Inkscape extension a try.

Edit: Here's the same card after applying PixelSnap:

Queen of Spades using PixelSnap, 72 x 100 px direct rendering Queen of Spades using PixelSnap, rendered at 16x and scaled down with GIMP

The version on the left is a direct PNG export from Inkscape, the one on the right was exported at 16 times the target size and scaled down in GIMP using Lanczos3 resampling. Note that the dimensions of both versions are 72 × 100 px to avoid clipped edges. There are still some bits that could benefit from manual tweaking (tip: set up a 1 × 1 px grid in Inkscape, with a 0.5 × 0.5 px subgrid), but that's probably inevitable with such a complex image.

share|improve this answer
    
Thank you so much for detailed explanation. It's truly great! –  user1065145 Dec 13 '12 at 12:51
add comment

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.