Ludicrous Software

SVG-T Icons for S60 Flash Lite Apps

Consider this the sequel to the previous post. Since packaging solutions for Flash Lite apps for S60 have been around for a few years, this is probably nothing new if you’ve created icons for S60 apps before. I generally found the process here to be less full of surprises than it was with Windows Mobile, so there are fewer lessons to be learned. In fact, I’m even going to skip the bullet points!

Adobe Illustrator can save as files as SVG-T, which is the format supported by S60. SVG-T doesn’t support all of the nifty things you can do in Illustrator. For example, if your .ai file has gradients, Illustrator will warn you that the gradients get rasterized when you save as .svg. When you install your app to the phone that you see (in my case) the resulting mess, since it looks like S60 doesn’t like it if your SVG files have embedded raster elements.

Not sure if this is a bug in Illustrator, but: if you save a .svg file, you get the aforementioned warning about converting gradients to rasters. However, since the file is still open in front of you, you still see your pristine icon, gradients seemingly preserved. You can edit them and everything, and when you save the file again, you’ll get the warning again. However, if you close the .svg file and open it up again, you’ll see your icon with the rasterized elements, so hopefully you still have the .ai version around if you need to make any changes. You can use the ‘save for web/devices’ option to output your file to .svg, however, if you do that, you don’t get the same warning about rasterizing gradients. Not sure why this is the case, but it’s something to watch out for.

If you want the gradient look in your icons, but without the nasty rasterization, you can take advantage of the fact that copying and pasting between Flash and Illustrator doesn’t do precisely what you want it to do. If you have a shape in Flash with a gradient and/or alpha transparency, and you copy and paste that into Illustrator, the single shape gets broken up into a large number of ‘slices’ (as in the image; click it for a larger view). Each of the slices has a slightly different color, so you get the appearance of a single solid gradient. You may notice that the color range isn’t preserved exactly the way you want it - in my case, I had to darken the color range. This meant a rather tedious process of selecting each of about two dozen shapes and modifying the color. However, the end result when viewed on the phone is actually quite nice. That said, if there’s an easier way of accomplishing the same look, I’d love to hear about it!

I think that like Windows Mobile, S60 also caches icons, so the install/uninstall/reboot cycle is replicated here.