HowTo: Create a nice SVG icon from a bitmap and use it in your Symbian app
-
Thought this might be usefull for some of you. This one assumes you do NOT have access to a nice .svg, but needs to create one from a bitmap. Note: make sure you've got the rights for it - don't steal.
Find a bitmap of at least 400x400 of what you want as the icon
Crop and clean in Gimp (or whatever you use)
Open Inkscape
Open your bitmap (embed or link doesn't really matter)
Select the bitmap with the cursor
Open "Path->Trace bitmap"
Select "Colors" in the Multiple scans option
Play around with the "Scans" value and click "Update"
Once happy click "Ok" and close the dialog
Move the new traced bitmap away, and delete the actual bitmap underneath it
Make a square with rounded corners and put it below the traced bitmap
Save the .svg
In your .pro file add "ICON = myapp.svg"
run qmake again and compile a new .sis
install and enjoy
You don't get perfect results, but it's OK as a start :)
-
Well,
you've also "this":http://www.leonardorisuleo.info/blog/2009/11/how-to-use-png-as-symbian-application-icon-instead-of-svg/ method, that's the one I'm using now.
You can use a simple PNG, and get a SVG icon for your app.
T.
-
Cool.
What are smart sizes for the PNG so it doesn't get stretched for Symbian^1 and Symbian^3? 88x88?
-
Frankly speaking, I don't know ... I've created my PNG using 48x48 pixels, and it's fine.
T.
-
Pixel perfect fine, or just OK? I hate badly scaled pixmaps with aliasing :)
-
I'm sorry, snowpong, I haven't experienced it so deeply ..
I have a N95 8Gb, and my icon is never scaled (AFAIK) ...
-
These are specification of the default Icons get created with QtCreator
For Symbian app
file-type: SVG
resolution: 44x44For Maemo app
file-type: PNG
resolution: 64x64
-
WTF? You'll need SVG-T for symbian applications, and Inkscape is NOT able to save files in that format
-
[quote author="beardog" date="1290072436"]WTF? You'll need SVG-T for symbian applications, and Inkscape is NOT able to save files in that format[/quote]
Settle down there doggy :) If you keep within a limited set of Inkscape and save as plain SVG, it can be used. So for example this works ok:
- Open PNG in Inkscape
- Save as Plain SVG
- Use as app icon in .pro file
Is is also smart to keep the width/height of the PNG divisable by 8 (sic!), or it may be scaled wrong and the icon looks like garbage...
-
SVG-t has been part of Symbian since 3rd edition circa 2005. Since it first ship the have always provided a command to convert an SVG file to SVG-t. At the moment, I have the 5th edition SDK on my PC. I see an installer for it under S60tools/svg2svgt.
-jk
-
Adobe Illustrator has no problems creating SVG-T.
There's a few revs of this and of course Tiny 1.1+ looks best.
-
[quote author="johnk" date="1291764697"]SVG-t has been part of Symbian since 3rd edition circa 2005. Since it first ship the have always provided a command to convert an SVG file to SVG-t. At the moment, I have the 5th edition SDK on my PC. I see an installer for it under S60tools/svg2svgt.
-jk[/quote]
Yeah, and since then it's been basically "broken":http://gnugos60.blogspot.com/2007/02/inkscape-and-svg2svgt.html ? :) There is one thing getting something as an icon, then there is getting something that looks nice. Have you used this converter with success?
-
[quote author="xsacha" date="1291765113"]Adobe Illustrator has no problems creating SVG-T.
There's a few revs of this and of course Tiny 1.1+ looks best.[/quote]Yeah, that seems to be the best end option. It costs lost of $$$ though.
After having experimented a bit more, it seems designing in Inkscape and then saving as "Optimized SVG" might be the best solution I've found so far (excluding Illustrator of course).
-
Hello,
In a previous comment, I mentioned S60tools/svg2svgt. Turns out it fails to install on Windows 7 with "The installer cannot run on your configuration. It will now quit." The installer ZeroG failed with a NullPointerException. I have reported it as "bug 16189":http://bugreports.qt.nokia.com/browse/QTBUG-16189
-jk
-
johnk, I voted for your bug.
-
snowpong, It's look as good wiki page, I created it "here":http://developer.qt.nokia.com/wiki/Create_a_nice_SVG_icon_from_a_bitmap_and_use_it_in_your_Symbian_app. Please check.
-
Hello,
Since I can't install the svgwsvgt utility, I've been looking at the alternative posted above. In the end one needs a 44x44 svgt icon. Why does one need to start with a 400x400 png?
-jk
-
SVGs can scale to any size. They don't really have 'sizes'. They are meant to be vector based, although hard if you start with a PNG ;).
You can blow it up to 400x400 and it still looks good. This is why it is recommended to start with a large PNG. Otherwise it'll look bad.
-
Thanks buddy, exactly what I needed!
-
Executive summary: I was able to validate these steps. Thanks!
Along the way, I ran into a problem. I thought I’d add this comment in the hopes it says the next developer some time.
Historically, I have been using the conversion tool (svg2svgt). Since it is unavailable, I used the approach above. I created this svg file using inkscape with a 48x48 png icon. It was saved as plain SVG. Unfortunately, the circular icon got compressed horizontally to fill only about a third of the space for the launch icon area. I do not see any errors generated in the build process.
Why did this happen? Step 10 reads
bq. Move the new traced bitmap away, and delete the actual bitmap underneath it
I moved the actual bitmap to away (to the right) but didn’t delete. Oops!
-
I think this might be interesting as well: "Use PNG as Symbian application icon instead of SVG":http://www.leonardorisuleo.info/blog/2009/11/how-to-use-png-as-symbian-application-icon-instead-of-svg/
Just yesterday I used this method to create my Symbian application icon and it works pretty well.
-
Small update: I've been trying out Adobe Illustrator CS5 here, and it works better than all the other approaches I've used so far.
I still prefer Inkscape to design the logo and save as a normal Inkscape .svg, but then I open it in Illustrator and use the "Save for Web/Device" and selected SVG 1.1+ Tiny - and it works on the N8's and N97s I've used. Seems it is the best solution if you just want it done.
Note: Some gradients will be rasterized by Illustrator, but they still look OK on the phone.
-
I faced the same problem with my own icons, so I wrote
http://mpaja.com/frontpage/SVG_PonyAdobe Illustrator is probably the best, but also very expensive.
I've been told that new Carbide.ui would do SVG Tiny conversion as well, does anyone have any experience with that?
-
Hi,
There is also "SVG Converter" which give great result:
-
Hi, the Inkscape thing worked pretty nicely, however I lost the transparency from my PNG image :o
