An Introduction

 

This article presents an argument for SVG as a compelling Web 2.0 technology. One that is competitive with Adobe's Flex/Flash platform, Microsoft's WPF/X and even AJAX.

So far, my personal experience with SVG has been that, as an ML it is difficult to build complex UIs with: the ML is very low level. One of the strengths of Flex and MXML is that it is a high level ML. Microsoft's XAML is closer to SVG but still offers the ability for components and complex CSS like features. The advent of XBL (XML Bindings Language) or sXBL (SVG's XBL) in particular has for the first time provided an opportunity to remedy this situation.

The resulting ML is more high level than pure SVG, in other words, more "semantic" web like. It easily integrates with server side technology like WebObjects.

 

The "Semantics" of an Image

 

Before we take a look at what sXBL is, it is important to understand what the "semantics" of a graphic is.

What constitutes the "semantic" or meaning of an image? Let's consider: are the following two images the same?

 

 

 

 

 

 

 

 

 

Do these two graphics represent the same image? Possibly

So perhaps in this instance, colour is not important. Therefore the colour of the triangles wouldn't be considered a "semantic" of the image. Or something that captures its spirit or soul.

 

What about these two?

 

 

 

 

 

 

 

 

 

 

So it seems that the stroke of the triangles aren't important. But what about if we make the triangles circles?

 

 

 

 

 

 

 

 

 

 

What about when we change the shape?

 

What is sXBL?

 

It becomes apparent that the shape, in this context, is part of the essence of the picture. But not the colour or stroke.

Now we have caught a glimpse of what it is to separate the "presentation" of the image from its "semantic". The semantics of an image is a very fluid thing.

This is where sXBL comes in. This is the function it performs, allowing the SVG graphic to be filtered into its essence, where even the behavior of an interactive image could also be distilled into this "presentation" layer.

In some ways it compares to CSS.

 

What can sXBL do for us?

 

What sXBL (and its progeny XBL 2.0) can do for us is to produce SVG from XHTML MP (or a subset of), CDF (Compound Document Format) or any other suitable ML.

 

Example: Keynote + sXBL -> SVG

 

The Keynote document markup language has been noted to be similar to SVG. This would be a very good candidate to develop an sXBL into SVG. Hence one could programmatically produce SVG presentations via the Keynote ML and sXBL.

 

SVGObjects 2.0

 

Now having understood what sXBL is and what sort of a role it can play in combination with SVG, I shall justify a point made previously: that is sXBL integrates well with server side technologies. Better in fact than pure SVG does. Here are some demos of WebObjects sXBL components that i've informally christened SVGObjects 2.0...

 

The following demos need to be viewed in a browser capable of rendering sXBL. In this case FireFox 1.5+

 

Demo1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SXTriangle

 

Demo2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SXShape

 

Things to note are that these generated images, although SVG, are in fact interactive. Click on the links to feel the interactivity of the graphics.

 

Conclusion

 

Here we've only considered looking at graphics of images if you may.

However, when we start to consider graphical user interfaces constructed with SVG+sXBL, then the "semantics" of the UI may distill differently. In other words, the "semantics" of an image is based upon its context. So far, we have only touched on the surface of this technology - namely sXBL, and how we could use it to build interactive, engaging user interfaces for the Web: ones that rival or surpass those produced with Flash or XAML.