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:
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:
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.)
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!
Jagged edges on icons
Re: Jagged edges on icons
Perhaps you could export it as a selection? This way you`ll be able to remain desired dpi and size unchanged.
Re: Jagged edges on icons
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.
Re: Jagged edges on icons
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.
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.
Re: Jagged edges on icons
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:

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.....

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

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.....

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

Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design