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: enter image description here

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


Any help would be much appreciated.

  • Rastering the image causes a little blur due to the antialiasing, and this is more evident on little images, but usually the amount of blur introduced by the antialiasing is tolerable. I've exported your logo in two format (the last saved in the file: 1389x271 and a smaller one: 200x39) and both the exports seem regular. Can you add to your post one of your unsatisfactory export, please? Commented Nov 26, 2013 at 8:24
  • @PaoloGibellini Just added the image. While it looks ok when zoomed out, is there a way to keep the detail of the image so that when zooming in it stays sharp? Commented Nov 26, 2013 at 17:45
  • 2
    Why would you be "zooming in" on a png?
    – Scott
    Commented Nov 26, 2013 at 18:44
  • 1
    What Scott is getting at is this: a png is a fixed size two-dimensional array of integers. When rendered, the values are rendered as a fixed size square. When you zoom, the square enlarges a uniform amount in both x and y, yielding a larger rendered square. The unit size is enlarged. Vector lines are stored as (float)points and are rendered using floats and then sampled at the current output resolution you always arrive at the smallest possible unit size for the output device.
    – horatio
    Commented Nov 26, 2013 at 19:02
  • When you export to raster like .PNG, you have to make the resolution (the size) as large as the largest "zoom" you want to support (to get best results). So if you want to zoom a 200x35 by five times, you need to export as 1000x175 to have enough data in the file to be fully smooth at full zoom.
    – mgkrebbs
    Commented Nov 26, 2013 at 20:59

1 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>

The output is:

Three logos

When zooming we achieve:

Three logos zoomed

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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