Javascript and SVG: Back to the Future

Happy New Year! One of the things I am looking forward to in 2012 is yet more improvements in the no-longer-humble web browser. The move towards ‘web apps’ has made browser manufacturers focus on the speed at which users can interact with a page (usually this is done via javascript). This has brought with it remarkable improvements to the usability of complex, interactive data graphics.  By way of example, I’d point you to the following page, making sure you are using a modern browser (Google Chrome, Firefox, Safari or IE9+). The graphic uses open SVG (Scalable Vector Graphics) content (not Flash) to show an interactive map of commuting patterns within Greater London (just mouseover the map to see dynamically-generated ‘flows’)

http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc15/london2.svg

Commuting map of London

One of the reasons Flash has been so popular in recent years has been its better performance when dealing with complex animated/interactive content. But this map is easily handled by modern browsers (under Google Chrome, in particular, it flies along) – the excuse to use Flash for this kind of content is diminishing. Even better, because the content is based on open W3C technologies, it will work on any compatible browser, including mobile devices (e.g iOS 5+, Android 3+). Given the recent abandonment of mobile Flash by Adobe and the momentum towards greater mobile browsing, the rise of open standards for data graphics seems irresistible. And as a final bonus, there are some great visualisation libraries being put together which will make producing data graphics using these technologies even easier.

Here at ONS’ Data Visualisation Centre, we loved SVG a decade ago – so we’re really looking forward to re-working some of our existing Flash-based graphics back towards HTML5/SVG in the coming year – I’ll try and reflect on some of the experiences of doing this in a later post.

4 thoughts on “Javascript and SVG: Back to the Future”

  1. That’s very good to hear. May I also remind everyone that the SVGopen 2012 conference will be held in Switzerland and would be a great and affordable venue to attend, present, share and discuss issues with fellow developers as well as browser and authoring tool vendors. Check the conference site over the following weeks at http://svgopen.org as more onformation will become available.

  2. I’m sure you’ll agree that Chrome-only is not a really attractive alternative to Flash-only, considering even Firefox-release-channel nearly dies on those mouse-overs. In Flash it’d run nicely everywhere.

    I think universal svg/css/javascript animation needs a bit more time. And a proper animation IDE: text based media editing just won’t cut it if you want fancy things. So it’ll come but for now it’s only sexy cause it’s new tech, not because you can do new or special things with it.

  3. Jeff, I beg to differ. Let me first give you some data points regarding performance that I gathered from various hard- and software:

    Starting at the low end I checked on a 12″ PowerBook G4 (1.5 Ghz single core PPC, 1.25Gb RAM) running MacOSX 10.5.8 which is the latest that you can use on that hardware. Admittedly Firefox 3.6.25 which is the latest available for that machine is about to be unusable when running the above SVG based visualisation of commuter data. However that OS by default comes with Safari 5.0.6 right now which is ok to use with the above graphic on that seven year old laptop. There is some lag to the mousemovement but it is ok and Flash would not be more performant given Flash’s poor performance on the Power PC architecture or the Mac in general.

    On the medium ground I checked on a 3Ghz Core 2 duo running WindowsXP (2GB RAM) with Forefox 9. Again I see the graphs don’t follow the mouse as swiftly as one would wish but still a fully usable experience. Try Opera 11 on the same machine and the graphic flies.

    Finally don’t forget Internet Explorer 9 on Windows 7 which will be a default configuration even in businesses soon. I ran the test in Virtualbox and gave Windows 7 only one CPU core, 2GB of RAM and only 64MB of graphics memory. Still IE9 runs the commuter graph absolutely smoothly with no discernible lag. Obviously Safari 5.1.5 on OSX 10.7.2 on a now standard i5 machine has no problem at all performance wise.

    I am a huge proponent of Firefox but there is currently no doubt that Firefox is not at the top when it comes to JavaScript and SVG speed. SVG is a 10 year old specification by now and if it hadn’t been that Adobe bought Macromedia (Flash) or that Microsoft tried to push Silverlight, we could have seen much more progress by now.

    In conclusion the above SVG graphic is far from Chrome-only, it just shows some lag on Firefox. And keep in mind that this is one of the more demanding graphics. Back in 2003 we had SVG based population pyramids running on machines that had CPU speeds measured in the Mhz range and worked perfectly. It took until 2011 that browsers’ native SVG implementation was up to speed with Adobe’s SVG plugin from 2003 in some cases.

    Regarding the IDE: After a long hiatus Adobe presented again at SVGopen 2011 and showed how their Flash authoring tool will output SVG:.

    Adobe presented some promising work to improve the situation: the upcoming Adobe Flash authoring tool will be able to export existing Flash projects to HTML5 (which includes HTML/SVG/DOM/Scripting and CSS components). Other projects include Adobe Wallaby (an Adobe Flash to HTML/SVG converter), improvements in Adobe Illustrator and Dreamweaver, as well as a new project called Adobe Edge which is a new animation tool specifically designed around HTML/CSS/SVG/Scripting.

    http://svgmagazine.com/nov2011/svgOpen2011.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s