I am at JavaPolis in Belgium, and Sun is taking the prime time of its keynote on JavaFX to talk about mobile. Tim Kramer started off with the usual “Java is on bazillions of devices” slides, and then talked a lot about how open sourcey they are.

It got interesting when Angela got up to give demos using NetBeans (Tim made a nice “Eclipse is painful” remark) that included a SVG Makeover of an app, and pointed to many other apps on the ME Application Developers community.

This page describes the “SVG GUI Makeover” of an existing lcdui.*-based application called “Local Business Search”. More information and the full source code of this application can be found
here as part of the Mobile Ajax Project

The Local Business Search application consists of three screens: The query screen, the result screen, and the map screen. The Yahoo! Local web service is used to search and retrieve business information that is then displayed in the application. We leave the underlying logic untouched but rework the application UI using SVG and JSR 226 technology.

With SVG and JSR 226 many improvements are possible. We can start by replacing the existing screens with SVG-based screens and add simple animations. Next, we can improve the usability by employing SVG techniques to create animated components such as scrolling lists and transitions. Finally, we can enhance the UI flow by utilizing overlays and transparency.

Not all of these have been implemented at this time. Currently, the code focuses on replacing the lcdui.*-based screens and using animations and a scrollable and zoomable list to improve the application UI and usability. These changes alone results in a dramatic improvement of the application and should give developers a good idea what is possible and how to get started in reworking their own content.

Additional changes and enhancements will be made over time.

Ronan has a nice article on how SVG is perfect for Mobile. He thinks that it is well suited because:

• It is a compact way of representing vector graphics
• SVG graphics (in keeping with the name) can be scaled to arbitrary sizes, removing some of issues with screen dimension proliferation on mobile devices
• It is an open standard
• Device support is better than you might think (more on this later)
• Because SVG is based on XML, many existing XML tools can be used to generate content.

The article moves on from the “why” and gets into the “how”. He discusses the device support, when you should use it, and finally shares his testbed application.

SVG-T is a very useful tool in the mobile web designers toolbox. Device support is already quite widespread and getting better. While many older devices don’t currently support SVG, the types of device that deliver a good enough mobile web experience that people actually use them are the very devices that do support SVG. So, with some exceptions (Opera Mini and the iPhone) the pioneers, taste-makers and early adopters are reasonably well covered. So go forth and experiment.