Advertisement


Exporting from SVG to PNG with AI


Question

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.

2016/09/22
1
0
9/22/2016 8:26:00 PM

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.

enter image description here

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

enter image description here

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.


2017/04/13
1
4/13/2017 12:46:00 PM