07 May 2009

Fun with S60 SVG icons

To publish the SIS version of Poulpy's Game, I needed a SVG icon.
When I asked for it to my friend, I didn't think it will be so difficult!

First difficulty : create a SVG file from Flash
All gfx for Poulpy's Game was made directly in Flash so we had 2 solutions :
- export gfx to a vector file
- export gfx to a bitmap file
- redraw gfx on Illustrator

I tried all the possible format to export a vector file
- AI : I was very surprised to find Adobe still uses an old library for AI export !
No CS2 nor CS3 export! And I won't talk about the colors ! Whatever I do, AI uses CMYB colors to render RGB value....==> not useable
- EPS : a solution....BUT gradient is converted to bitmap data! ==> not useable
- PDF : priting to PDF give me good result, but as soon as I open it on Illustrator CS3, it converts the gradient to bitmap data and I was unable to import it on inkscape ==> not useable

The quick and dirty way I found was to export a png of your gfx and embed it on a SVG. Dirty because it's a bitmap data and so scaling is very ugly (like bitmap gradients are!)

We finally choose to export to EPS and then redraw everything by hand on Illustrator

Second difficulty : SVG quality
I was very surprised by the SVG quality on my first try....so I tried with Inkspace ( see Third difficulty )

Illustrator :



Inkspace



Third difficulty : valid SVG
So we imported the AI's SVG in Inkspace.
Unlike AI, Inkspace doesn't directly save in SVGT but this guide on Nokia Forum gives you the exact process to follow.
I followed this guide and tried to make a first try with Nokia's beta packager : "Error : icon too big"

After some tests, I finally found these 2 links about SVG's viewbox :
- viewBox error on Inkspace
- Forum Nokia KISS0000398 : SVG rendering problems caused by missing viewBox attribute

In fact, AI defined its viewbox attribute from EPS size (Flash size : 320x240).
I was unable to find a way to correctly adjust it on Illustrator nor Inkspace so I adjusted the viewbox BY HAND on the SVG (which is a XML file).

And, finally, I produced Poulpy's Game final SVGT icon !
Ouf!

More (other) interesting info on SVG icon can be found on Ludicrous Software's blog

2 comments:

stelt said...

It's "viewBox", not "viewbox".

And why do the Flash and bitmap stuff? Your route seems like asking for trouble.

William Gregoire said...

typo error...

for the bitmap stuff, it's ONE way to do...as I said, it's the ugly one, not recommanded

for the flash stuff, my gfx was drawn on Flash, so we were looking for a valid way to convert the Flash gfx to a SVGT icon