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

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!

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.

grego

I faced the same problem with my own icons, so I wrote
http://mpaja.com/frontpage/SVG_Pony

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