Scalable Vector Graphics In St. Vital Centre

When it came time for Fusion and Visual Lizard to relaunch the St. Vital Centre website, one of our goals was to modernize it as much as possible. This meant using up-to-date web standards, creating a responsive layout, and replacing Flash-based elements with CSS and JS alternatives. Doing so would ensure the site worked smoothly on current web browsers as well as mobile devices. The biggest challenge ahead of us was going to be the directory map.

The original directory map was built using Flash. Though it operated smoothly, it couldn't be seen on iOS devices, which currently account for nearly a quarter of the website's traffic. However, St. Vital Centre wanted to maintain the general functionality: being able to zoom in/out, panning in four directions, as well as clicking and highlighting individual stores. A static image wasn't going to cut it.

After some research and experimentation, we decided to build the new directory map with scaleable vector graphics (SVG).

The big gains using SVG is that it loads fast, looks great on high-density displays like the new Retina iOS devices and Macbook's, allows for direct manipulation through CSS and JS, and it works on modern mobile browsers like iPhone's Mobile Safari. Two main problems are that it has spotty support in many browsers, and that it has zero support in older browsers like IE8 and IE7. Not ideal.

Luckily, we didn't have to do anything too fancy with SVG for our directory map. Basic support was all that was needed, with some sort of fallback for those browsers that couldn't handle it. We accomplished this by using SVGWeb, a javascript library designed to provide support to as many browsers as possible and allow for a Flash-based fallback for everything else.

Fusion created the directory map as a vector graphic, to be used in printed material as well as the website. We were able to convert that vector graphic into SVG markup by importing it into Inkscape. Inkscape automatically groups paths and assigns ID attributes, but you can use its provided tools to do some general manipulation. For instance, we made sure the amenities on the map (washrooms, telephones, etc), were assigned ID attributes with similar prefixes so we could target them specifically.

SVGWeb documentation recommends keeping the SVG markup as a separate file and calling it in using an object tag. This would allow browsers to cache the file and speed up page load. We decided to include the SVG markup instead, as this allowed us to style it with CSS and assign JS events with jQuery.

Adding zoom and pan tools to the map was relatively simple using jQuery. There are multiple tutorials and libraries you can find through a google search. We also used jQuery to assign hover and click events to the map, making each store a link to the individual tenant's information.

The good thing about building it this way is that SVGWeb applies the full SVG markup and the assigned JS events into the Flash fallback. The panning, zooming, hovering, and clicking all works in the Flash version without having to code a completely separate solution.

One of the accepted tenants of using modern techniques like these are acceptable fallbacks. In older browsers, we see Flash instead of SVG. In some browsers, the popup labels get positioned at the mouse pointer's location rather than above each store. In some browsers, the popup labels don't get the little arrow "tail" on them. Not everyone is going to get the same experience, but not everyone is losing anything important. Everyone is supported in some way, but visitors who have been diligently updating their browsers will get a fuller experience.

Though only partially supported, we expect SVG to start appearing in more and more projects in the near future. With native Flash support being abandoned by mobile operating systems and high-density screens being adopted by device manufacturers, there is a growing place for vector graphics on the web.

to blog