Categories: Symbian C++ | S60 | How To | Graphics | SVG

This page was last modified 21:14, 30 June 2008.

From Forum Nokia Wiki

Create the SVG files

There are at least three ways.

1. The easiest way is to buy Adobe Illustrator CS2 to draw icons. Illustrator CS2 can save to SVG-Tiny format. It costs some money but it will save you a lot of time. If you're not great at drawing - there's a feature that will convert a photo to an SVG line drawing with color fills. So, make a photo of an object with your phone and have illustrator convert it to a line drawing.
2. You can download a free editor named Inkscape. Inkscape saves to SVG format but not SVG-Tiny. You'll have to use the SVG2SVGT tool to convert the icon (found under S60Tools folder in SDK). But there's a problem. If you use certain draw object types then Inkscape will produce SVG code that will not work. Start with a very simple image such as a box - test it - and then add some details. (Inkscape is open source C++ so anyone of us could fix it to directly generate SVG-T for S60.)
3. You can type an SVG file into a text editor. It's XML syntax.

TIPS:

• An easy way to test your icon is to build the S60Ex\helloworldbasic example. Replace hellowworldbasic\gfx\qgn_menu_helloworldbasic.svg with your svg file. Test on a phone.
• Make your icon on a 44x44 pixel canvas. This might not be necessary in some cases but it is not clear whether S60 will scale your icon in all the places it can be used.
• Keep in mind that S60 caches icons between runs of your application - so sometimes when you update an icon you still see the previous version. You're not losing your mind - it's caching the icon. Try restarting the phone when updating icons.

Convert SVG files to Symbian mif file

You would find a tool called "mifconv" in the epoc32/tools:

For e.g: Now from command line:

c:\Symbian\9.1\S60_3rd_MR\Epoc32\tools>mifconv MyNewApp.mif /c32 C:\MyProject\gfx\qgn_menu.svg

This will generate .mif into epoc32/tools folder.

Now open your .pkg file and find for path of .mif file. Then just give path of your newly created .mif file. Like:

"C:\Symbian\9.1\S60_3rd_MR\Epoc32\tools\MyNewApp.mif" -"!:\resource\apps\YourProjectNamed_reg.mif"

You could either cut-paste your newly created .mif file into your folder and give its path in source path of your .pkg file. Like:

"C:\MyFolder\MyNewApp.mif" -"!:\resource\apps\YourProjectNamed_reg.mif"

Note: Here qgn_menu.svg has been redesigned in the Inkscape and replaced with the same name as qgn_menu.svg

Related Links

• Issue with SVG icon display on 3rd edition

• SVG rendering problems caused by missing viewBox attribute