# Rendering scaled-down card images

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:

71x raster:

• 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? – Ali1S232 Dec 11 '12 at 12:21
• 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
• 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

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:

It looks noticably sharper than the version you got using 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:

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.

• Thank you so much for detailed explanation. It's truly great! – user1065145 Dec 13 '12 at 12:51