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 numerous times but have yet to produce a icon image that retains a good quality. Each attempt produces a very blurry image at a screen resolution of 72 ppi. When I increase the resolution to 300 ppi, the image is clear but the dimensions of the icon are now 67px x 67px. Is there anyway to lock the dimensions while applying a higher screen resolution. I have attempted this through the normal export as well as tried to set the values within the artboard as well.

9/22/2016 8:26:00 PM

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.

4/13/2017 12:46:00 PM