Jagged edges on icons

Post questions on how to use or achieve an effect in Inkscape.
kbless7
Posts: 2
Joined: Wed Feb 01, 2012 1:01 pm

Jagged edges on icons

Postby kbless7 » Wed Feb 01, 2012 2:11 pm

Hello all,

I am a brand new Inkscape user, but so far I have found it user-friendly.

I'm trying to use Inkscape to create icons for some Android apps, but I'm having trouble getting smooth edges. When it's a .svg, obviously it is perfect:
wifi_off.svg
(2.9 KiB) Downloaded 204 times

I initially made it as 240x240 px at 90 dpi. I desire multiple resolutions, but for instance, I made a 48x48 px which exported at 13 dpi using the export bitmap option. It looks like this:
wifi_off.png
wifi_off.png (1.15 KiB) Viewed 3015 times

It's easy to see the jagged edges. On a phone it looks blurry around the edges. It doesn't look terrible and I would have normally called it good, but stock icons looks pretty much perfect. Take a look at this one (easier to see in GIMP, etc.)
stat_sys_tether_wifi.png
stat_sys_tether_wifi.png (1.51 KiB) Viewed 3015 times

It is flawless, so I'm hoping someone has insight as to how I can make my icons look better. I've tried starting at 48x48 size but that same issue persists. I saw this thread http://www.inkscapeforum.com/viewtopic.php?f=5&t=3113, but there wasn't an answer there. Thank you so much!

User avatar
Maestral
Posts: 982
Joined: Sat Aug 27, 2011 7:10 am

Re: Jagged edges on icons

Postby Maestral » Thu Feb 02, 2012 12:43 am

Perhaps you could export it as a selection? This way you`ll be able to remain desired dpi and size unchanged.
:tool_zoom: <<< click! - but, those with a cheaper tickets should go this way >>> :!:

User avatar
druban
Posts: 1917
Joined: Fri Nov 20, 2009 10:48 pm

Re: Jagged edges on icons

Postby druban » Thu Feb 02, 2012 3:13 am

When you say, "flawless" what aspect are you referring to? They look about the same to me, although they're constructed differently Naturally the one that you think is better will look smoother on a lighter background ... put it on a white background to really smooth it out! If you put it on a red background it should look not too different....
Your mind is what you think it is.

kbless7
Posts: 2
Joined: Wed Feb 01, 2012 1:01 pm

Re: Jagged edges on icons

Postby kbless7 » Thu Feb 02, 2012 2:22 pm

Exporting as a selection has the same effect.

The system icon is displayed on a dark background, so there is a big contrast and it looks good. When I make my icon white and display it on a dark background it doesn't look as good.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Jagged edges on icons

Postby brynn » Sat Feb 04, 2012 4:36 am

When you scaled it from 240 x 240 to 48 x 48, that was done in Inkscape, and done to the SVG version, right?

I made a little test icon at 48 x 48, and exported at 13 dpi, and the result was 7 x 7 -- much too small to see whether the edges are smooth or not, and almost too small to see at all! So I'm a little baffled how yours still looks pretty much like 48 x 48. But at 48 x 48, the rasterness of the PNG still is evident (pixels), and I'm not sure it can be avoided. Let me upload my peace sign so you can see. This was exported at 90 dpi:

Image

Or do you mean that you exported the 240 squared version at 13 dpi, resulting in the 48 squared version? Hhhm, no. That results in a 35 squared version.

I also wanted to note that DPI as Inkscape uses that term, is not exactly the same as dpi in raster programs. Multiple topics have explained how it's different, but as hard as I try, I can't understand (or explain) it. Usually (in raster graphics) changing the dpi affects the quality of the image, but in Inkscape, it changes only the size of the export.

To me, your PNG icon looks no better or worse than mine, as far as the pixels showing on the edges. And I don't think it looks blurry here. But it's true that the pixels are somewhat visible. As I look as my and your icons in Inkscape though, I actually can see the pixels too. Even with vector software, the pixels are inherent and unavoidable in this situation (the broad curves), because we're looking at them on computers, which must use pixels, even for a vector display.

The stock icons that you're comparing to yours, do any of them have a broad curve like yours? If they only have straight edges, that may be why they look sharper. The example you posted is too transparent (or light) for me to really make any kind of visual comparison. I suspect that if it were fully opaque, we would see the same pixels that we see in your and my icons.

Try to find some icons on your phone that have a broad curve, and compare to yours when it's loaded onto the phone. If it still looks unacceptable....I'm not sure. You might try using the PixelSnap extension. I don't think it would help in this situation. If you had imported any raster format image, then the PixelSnap extension would help (or align to a pixel grid). Actually yes, the more I think about it, it might actually help! I'll try on my peace sign.....

Image

Well, I'm not sure if that helped or not. I don't see much difference, if any at all. But it certainly wouldn't hurt for you to try it :D


Return to “Help with using Inkscape”