How to shrink logo without losing quality inkscape

Question

I'm really not much of a graphic designer at all (programmer) but I have dabbled in some image editing using GIMP and Inkscape.

Here's my situation: I have a nice, sharp image of my logo as an SVG file in Inkscape. However, when I try exporting it as a smaller raster image (PNG) the picture loses quality and becomes blurry. I've tried changing settings and whatnot, but I've been unsuccessful in saving sharp, smaller images.

Here's the logo SVG file in question:

Here's a link to the same image exported as a smaller png:

Any help would be much appreciated.

Answer 1

As @horatio pointed, it's pretty normal loosing the details while zooming on a fixed size image.

Assuming that the final destination of your image is a web page, when you perform a zoom operation the browser scales the raster images, usually by interpolation.

If you are interested to a web page that can be zoomed, you can use directly SVG as image format (see @denmch comment), being aware that only modern browsers are able to manage vectorial images, or you can simply use a big image (see @mgkrebbs comment) and specify the output size at code level (obviously this increases the bandwidth consumption for the page).

For example, in html, we can compare the three alternatives (SVG logo, small PNG, big PNG):

<table border='1'>
    <tr><td>SVG image</td><td><img src='./thelogo.svg' with='200px' height='39px'></td></tr>
    <tr><td>Big PNG image</td><td><img src='./thelogo_big.png' with='200px' height='39px'></td></tr>
    <tr><td>Small PNG image</td><td><img src='./thelogo_small.png' with='200px' height='39px'></td></tr>
</table>

The output is:

When zooming we achieve:

The small PNG image seems blurred (it's interpolated to a bigger size!), while the big PNG image remains unblurred (it's interpolated to a smaller size) until the zoom is under a certain level. The SVG image will remain sharp.

It all depends on what you need to do...