HowTo: Create a nice SVG icon from a bitmap and use it in your Symbian app

snowpong

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

tony

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.

snowpong

Cool.

What are smart sizes for the PNG so it doesn't get stretched for Symbian^1 and Symbian^3? 88x88?

tony

Frankly speaking, I don't know ... I've created my PNG using 48x48 pixels, and it's fine.

T.

snowpong

Pixel perfect fine, or just OK? I hate badly scaled pixmaps with aliasing :)

tony

I'm sorry, snowpong, I haven't experienced it so deeply ..

I have a N95 8Gb, and my icon is never scaled (AFAIK) ...

raghava.chinnappa

These are specification of the default Icons get created with QtCreator

For Symbian app

file-type: SVG
resolution: 44x44

For Maemo app

file-type: PNG
resolution: 64x64

beardog

WTF? You'll need SVG-T for symbian applications, and Inkscape is NOT able to save files in that format

snowpong

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

johnk

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

xsacha

Adobe Illustrator has no problems creating SVG-T.
There's a few revs of this and of course Tiny 1.1+ looks best.

snowpong

[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?

snowpong

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

johnk

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

vsorokin

johnk, I voted for your bug.

vsorokin

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.

johnk

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

xsacha

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.

milot.shala

Thanks buddy, exactly what I needed!

johnk

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!