I’ve been doing some work on a iPhone webapp (natively deployed, wrapped in PhoneGap naturally) and decided to incorporate some advanced visualizations using Scalable Vector Graphics. Achieving robust SVG support in browsers has been a long struggle, and the good news is that the latest builds of both Firefox and Safari, desktop and mobile, do it well. Safari’s support comes from the excellent Webkit project – read more about the status of their SVG support. On the desktop, SVG hasn’t gained much popularity, mostly due to the presence of Flash and Java, the incumbents when it comes to advanced visualization.
However, the reason SVG should matter to iPhone developers is that, since there is no Flash or Java support, it is difficult to achieve rich, dynamically rendered interfaces – think charts, clocks, gauges and other visualizations, through CSS alone.
The application I am developing required a working classic clock with semi-transparent wedges overlaid on top of it showing different upcoming events. The implementation is nearly done, so you will be able to see it in action soon, but for now here’s a screenshot:
And for those of you looking to do some rad geo-hacking and break out of the bonds of Google, how about moving towards OpenLayers based SVG maps? There are some links to great SVG map demos at the end of this article. Also check out James Fees GIS Blog for a whole thread on this topic.
Not sure if this works yet in WebKit on iPhone, but have you seen this cool demo of combining SVG with the new HTML video element? Perfect for the multitouch capability of the iPhone, no?
All in all, just food for thought, and an example of a great technology that might have finally found its niche!
Here are some great SVG demos, samples, tools that should all will work in the iPhone Safari browser… and hopefully the Android version of WebKit, as well!
- Smooth Analog Clock: http://www.browserland.org/scripts/svgclock/
- Bar Graphic Tutorial from IBM: http://www.ibm.com/developerworks/xml/library/x-svggrph/
- Slides from SVG Talk in 2002: http://luxor-xul.sourceforge.net/talk/jug-nov-2002/slides.html
- ChartSVG open-source package: http://www.hardcoded.net/chartsvg/
- ESRI SVG Map View: http://apps.arcwebservices.com/svgviewer/map.html
- More SVG Map Apps: http://www.carto.net/