A Look Into SlingPlayer Mobile's Use of SVG Tiny

During the annual Symbian show in London two weeks ago, Sling Media introduced their Sling Player for the Symbian mobile platform, the foundation for the S60 and UIQ platforms. An interesting fact about the SlingPlayer for Symbian is that SVG Tiny, SVG's mobile profile, is heavily used to power the user interface. I had the chance to exchange emails with George Williams, an old acquaintance I made back when I was consulting for Adobe, who is now leading the efforts for interaction design of the SlingPlayer on Symbian and provided me with information as to how SVG was used in the creation of this application.

All the graphics in the SlingPlayer for Symbian user interface are rendered using SVGT 1.1 Plus, as supported by the Scalable UI APIs in the S60 platform. These APIs really fit the needs of this application as they allowed them to have code that would load SVG assets or bitmaps using the same APIs, as the Scalable UI APIs can equally load vector-based SVG assets or bitmaps. That came in very useful as the SlingPlayer deal with bitmaps when it comes to channel logos, and given they have to manage hundreds of them and that they all come from bitmap sources, this was a real win compared to having to convert all of those to vectors.

To create the graphical assets for their UI, George's team used a variety of tools to fine tune the icons as they wanted them. First, they mocked up their desired UI in Photoshop, then used Illustrator CS2 where they spent most of their production time designing the vector assets. Following that, they went into GoLive CS2 to validate some of the more complex graphics and finally used Ikivo Animator for some remaining graphics cleanup. Once all of this was done, the design team used the Nokia Series 60 Theme Studio to compare the SVG graphics against the original Photoshop skectches. Adobe have some information on their website about using their Creative Suite with Ikivo Animator for mobile content development.

At the moment, none of the SVG assets used are animated, but they do make use of transparency, gradients, and other more advanced graphics features of SVG Tiny. The S60 Scalable UI APIs actually don't currently allow for loading animated contents, so that fits right with the current state of the technology they chose to use. However, George tells me that his team are investigating how to leverage SVG Tiny 1.2 for some future products. Given the tight integration of graphics and multimedia in SVG Tiny 1.2, this is only natural and should allow them to evolve from the existing SVG assets they are currently using.

I asked George if they ever considered Flash Lite as an enabling technology, or even as a prototyping tool, and it turns out they never really considered using Flash Lite as it didn't have the integration capabilities that Scalable UI APIs offered, mainly mixing and matching raster and vectors as assets. In fact, this just confirms a key point I usually put forward in talks about Mobile SVG in that the key differentiator between SVG Tiny and Flash Lite is not so much to be found in what graphics, interactivity and multimedia features they offer, but rather that SVG Tiny is integrated tightly in many of the application layers of mobile devices. Indeed, you'll find SVG Tiny supported natively in browsers, UI toolkits, programming environments all the same.

This is the first of a series of usage of SVG in real-world applications that I hope to be able to highlight on this blog in the future, but this definitely is a fine example of how to put Mobile SVG to use today for your mobile application development.