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

Answer

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.