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

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

? Offline

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

? Offline

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

? Offline

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

? Offline

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.

? Offline

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!

? Offline

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!

milot.shala

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.

snowpong

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.