: Exporting from SVG to PNG with AI When exporting an SVG icon to PNG, I am attempting to retain the quality of the image while not loosing the size (16px x 16px). I have made the attempt

@Turnbaugh909

PPI doesn't matter

As Joojaa says, the PPI doesn't matter. The PPI value itself makes no difference at all, all that matters is the pixel dimensions. a 16 × 16 pixel image at 300 PPI and 72 PPI are exactly the same thing. If you're working in Illustrator and exporting for screen always export at 72 PPI (assuming your document is at the intended size), but this actually has nothing to do with the PPI value assigned to the output file, it's just a shortcut to output it at the correct size.

The problem is that your SVG wasn't designed to be shown at 16 × 16 pixels. Vectors have no inherent size so most of the time it doesn't matter, you can scale as much as you like. The problem appears when your vector is no longer a vector—i.e. made up of pixels.



An example...

Take this boom box SVG icon. The original vector on the left looks great. View the same thing at 16 × 16 pixels and it looks terrible. You can see this is because the paths don't align with the pixels. There is too much information to be seen in the number of pixels available.



Image 1: Original vector (left), 16×16 pixel preview (right)



The solution is to design the icon specifically for the size it will be viewed at. Take the same icon again and redraw the paths so that they align with the pixel grid and you have a nice clean icon (cleaner at least, the speaker/circle could probably do with some more adjusting):



Image 2: 16×16 pixel preview original vector (left), adjusted paths to fit pixel grid (right)



This means in a lot of cases you should have different versions of the same icon for different sizes. Or at the very least design with the smallest size in mind.



Related reading:


What is meant by 'designing an icon at 100% scale'?
PPI in the Wild: implications of setting or providing a PPI flag in an image file
DPI Vs. PPI Vs. Image dimension, what should be taken to consideration?
Why are the terms DPI and PPI so misunderstood?

Vote Up Vote Down

@Kimberly620

No, you have misunderstood things. There is no difference between as a 16x16 pixels image at 300 DPI and 16 x 16 pixels image at 72 DPI. The DPI value simply does not change the image clarity in any way! 16 pixels is 16 pixels, a pixel is a sample the sample is the same irrespective . There is no such thing as higher screen resolution in this sense. Doing what you ask would accomplish absolutely nothing.

Only devices have a resolution property images do not. For images the DPI value is a piece of metadata. It is like putting a post it note on the image saying that this is the size I would wish to output on your hard copy device i.e. a printer. It is universally understood that displays do not even begin to try to heed this.

This does not mean that your question is broken, the only reason I brought the previous up is that very many people make your mistake and quite frankly you should not even go there. If you have a hard time understanding DPI just ignore it, you will know when you need it and it basically only applies for printing anyway.

As you have discovered having a vector file vectors does not mean infinitely scalable content. Particularly small icon sizes require you to manually tweak the content to hit the pixel grid. You could try to enable pixel snapping for your art the tweak the points*.

Alternatively, more closely to what you think is going on, you could try a different filtering technique. It is possible that switching over to, type optimized rendering or a windowed Sinc filter (Lanczos), see this post. However, Because your image is extremely small i doubt this helps you in any practical way. This is the reason fonts are hinted, as there is really no way around the fact that tweaking points is the best strategy.

* Or scale up enable pixel snapping and scale down for quick and dirty approach. Alternatively you can set the grid to pixel/ half pixel sized and use the jooSnapToDocumentGrid.jsx on points you deem most problematic.

Vote Up Vote Down