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.
2
-
Are you reducing the SVG before trying to save as PNG? -- that's your best bet.– ScottSep 22, 2016 at 20:51
-
The SVG is already at the size of 16px x 16x before I export it to a PNG.– BgreenSep 23, 2016 at 4:58
Add a comment
|
2 Answers
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.
-
Thanks for the reply joojaa. I am only input what I have performed in Adobe Illustrator. I have perform all of the manual tweaking of my icons at a snapped 16px x 16px grid already. Nothing is just being scaled down. I have created all of my SVG's to the grid size that the will be utilized as. As to the exported and then viewed png's at the size exported 16px x 16px at either 72 PPI or 300 PPI. They are significantly different. however when looking at the dimensions of the file in File Explorer the dimensions have changed with the resolution size.– BgreenSep 23, 2016 at 6:17
-
@Bgreen offcourse bigger images look different a 16x16 pixel image at 300 dpi is same as 16x16 pixel image in 72 dpi but tht is not what you have. What i am saying is true even if its hard to accept.– joojaaSep 23, 2016 at 6:32
-
It is not hard to accept. However if I insert the png images of each which are both showing the same dimensions of 16px x 16px into Word, PowerPoint, Visio, even in Illustrator, etc. The quality of each is apparent. png file size has grown beyond the 16 x 16 now to about 67 x 67. In order for me to use the file within certain applications, the icon needs to be no bigger than 16 x 16. I just need the quality to be good as a PNG.– BgreenSep 23, 2016 at 6:44
-
@Bgreen yes but you have less samples so the quality can not be as good unless your graphics align with the samples better. You can try different fiters but its still not going to make a huge difference, If you are below the nyquist limit, then you are, and there is no way around it.– joojaaSep 23, 2016 at 6:49
-
@Bgreen and how often do you view images at 1:1 size in illustrator or word or powerpoint? Default powerpooint and word is zoomed beyond one pixel is one unit. Theres no way to chek that. In illustrator you can see the size right if you hit 100% zoom– joojaaSep 23, 2016 at 6:52
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.
