Vector my site

I’m working on this website that will be displaying diagrams that should be rendered via vectors. The web to date has been all about working around the limitations of its visual capabilities. Using images and standard HTML would be doable but where’s the fun in that!?

So, vectors it is. I kow need to pick a technology. Flash is the obvious choice and I have a fair amount of experience with it, which isn’t in its favour. Next.

Silverlight is falling into the trap of having a platform bias like flash does. Never mind its smallish market share and windows only development platform. Next.

Both are plug-ins and plug-ings tend to implement things in a less egalitarian way so the experience differs surprisingly strongly across platforms. They also easily allow developers to fall in to the trap of favouring high performance rendering that’s OS specific. This can be alleviated with some careful scripting but the underlying plug-in technology of both is flawed.

SVG has been held up as the true vector technology for the web for what seems like forever and has been a recommendation since 2001.
It’s the only vector graphics specification that has such recommendation by the w3c. It’s a declarative language for DOM elements in form of XML. The fact that it creates DOM elements made it a prime contender to topple Flash when incorporated with JavaScript. Adobe’s LiveMotion product showed some early promise but ultimately failed.
Today though we’re seeing some major improvements in performance and implementation methodologies. Raphaël being one of the recent standouts. This libary works around some of the mimetype issues and implements inline SVG in HTML allowing you to avoid xHTML. Embedding SVG as XML isn’t really an option because it makes event delegation more complex than it needs to be. In any case we’re left with hacks to make it work. All in all it is still a contender despite it’s stayed XML feel.

Canvas, the new kid on the block. Strictly speaking Canvas is not a vector orientated technology but a pixel based one. The main thing Canvas has going for it is performance (especially with lower screen resolutions), ease of use and strong adoption across the browser vendors. Mobile devices seem a perfect fit. With higher resolutions the performance takes a bit of nose dive. In our specific testing we haven’t found it to be a problem so your milage may vary.
Also cross browser issues are still a bit problematic but the Explorer Canvas library neatly enables IE support. The main issue we have is that we need to use text, and Explorer Canvas doesn’t support it. In fact Firefox 3.0 doesn’t fully support Canvas text either. Good thing modernizr can check for that so we can use fallbacks.

VML is a open vector format that for reasons beyond me has never really been adopted by the browser vendors other than Microsoft so it doesn’t really count in this discussion. It’s mainly used to allow SVG or Canvas to be mimicked in IE. Microsoft hasn’t committed to either SVG or Canvas and I’m not holding my breath that they will. It’s also pointless to try and guess what they might do, future proofing in this sense is futile.

SVG is the more mature technology that can play ball in the open web using w3c recommendations. You can even force it to play nice with HTML5, well, we would have no other real choice because the powers that be have killed off it’s future home XHTML2.0. This raises the question: Is SVG a good fit for the future of the web? For now it doesn’t look promising.
Canvas is new, it’s reasonably well implemented and, more importantly, everybody is working on it. It’s got momentum. If we’re going to adopt an additional technology then Canvas seems like the obvious choice and even some of its problems have been addressed in one fashion or another. I fully expect these to be resolved by next year. So the choice seems clear, <canvas> it is

Native HTML5 technology here we come!

Next entry: Wireframes
Previous entry: Microsoft is trying