Design visualisation and mapping for the web using SVG

This post is about a way to share the visual representations of learning activities in particular, and visual representations of linked ideas in general (go straight to an example).

This general category of ‘visual representation of linked ideas’ includes any sort of concept map (including maps produced by Compendium the application on which CompendiumLD is based). The examples I give are CompendiumLD maps because CompendiumLD is the application I’ve been working on, but I have made some notes about how the ideas I present are applicable to other applications.

The post is broken into chunks: motivation, an example, some notes about the coding, a bit about mini previews of maps, and some thoughts on opportunities, possibilities and prerequisites.

Motivation

The motivation for this is to improve the way that CompendiumLD maps can be shared, by

1. facilitating the embedding of maps in web pages
2. using a file format that other applications can work with.

The technology I’ve used is the W3C’s Scaleable Vector Graphics (SVG) format. SVG seemed an obvious place to start because it is a format designed for 2 dimensional graphics, and almost all browsers now display SVG content, and numerous other applications can open and edit SVG files (including some web based tools).

This quote from the W3C’s site summaries some of the power that SVG offers “SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. ……..SVG drawings can be interactive and dynamic” (about SVG). It supports supporting zooming, panning and scripting and a whole host of other functionality that encouraged me to explore it in relation to maps of learning activities.

Example

Here is an example of a CompendiumLD activity map coded in SVG and embedded into the page using the HTML <object> tag. Note that you will need a browser that can display SVG to see this (fyi I’ve jotted some notes about SVG support in browsers and other applications).

This example is very basic. It contains just two nodes and one link to keep the SVG code simple as I have written it by hand as a way of exploring the features that SVG offers, and to think about the way that CompendiumLD nodes and links could be encoded in SVG. There is no reason why these SVG renderings could not be generated by an application such as CompendiumLD if or when it is decided that this would be a useful thing to do (e.g. by the OULDI and/or other projects).

This map features two nodes from the OULDI learning design stencil, an activity
and a learning outcome
, connected by a link. If you hover your mouse over the asterisk (*) in the example a window should pop up displaying further details about the learning activity. If you click on the learning activity node you will see a map of the learning activity itself within the same window fragment. You can also see how the maps will appear when displayed at high or low levels of magnification by zooming in or out (e.g. use ctrl ++ to zoom in , ctrl — to zoom out). One of the things I’m thinking about doing is to pop up and mini preview of a map nodes contents when you hover the mouse over the node, allowing you to glimpse its contents before deciding whether to click and explore it in detail (more on mini previews).

CompendiumLD and Compendium already offer ways to share map data (via the Compendium XML format or SQL), and interactive (but not editable) web renderings of maps (see ‘Middle east role play’ example, or other examples). When coding the SVG version of the CompendiumLD maps I have tried to keep the code related to the semantics of the map separate from code which describes the visual style One of the ways SVG facilitates this is by enabling the look of elements to be specified via CSS. This is work in progress, and I have not been entirely successful so far, but here is an explanation of my coding and thinking.

By the way, I can see there’s an issue with the text layout when this example is rendered by the Chrome browser in that the first line of text for the task node is left aligned with node, rather than being centred on node. I’m not sure why this has occurred, could be my SVG or CSS, could be the Chrome’s rendering engine, it looks fine in other browsers. I will investigate.

Coding

The SVG rendering I have created consist of four components

1. A series of definitions stating what the nodes should look like (theses are contained within the SVG file)
   Each icon is defined as a group <g> of SVG elements in the <defs> section at the beginning of the SVG file.
2. Code which specifies the contents of the map (also contained within the SVG file).
   This includes where particular nodes should be positioned on the SVG canvas, the text and other adornments for each node, links between nodes. I could have used XML from other namespaces (e.g. the Compendium XML DTD) to include Compendium specific information. I have avoided doing this with the intention that all the information that Compendium or CompendiumLD needs can be encoded using SVG, meaning that a user (e.g. a programmer) only needs to understand SVG to make use of the file. This decision needs further thought as I progress with these experiments!
3. Styling information for nodes and links (contained within a CSS file linked to from the SVG file)
4. Scripts specifying interactivity (contained within a Javascript file linked to from the SVG file)

Here is a fragment of code from the first SVG file shown in the example i.e. this SVG code, annotated to further explain my thinking, and it shows some of the things I’m not sure about.

The idea which I think is applicable to other idea and concept mapping applications is the use of group elements and class attributes to hold the semantic information about specific components of a map. In the way I have used it in the code fragment above, the class attribute enables scripts to find the data related to specific concepts (e.g. activities or learning outcomes) in the case of CompendiumLD maps, because the relevant information is an a group element (<g>) with its class attribute set to ‘activity’ (see the code for the activity group or for the learning outcome group).

Mini previews

A few paragraphs back I mentioned the idea of mini previews i.e. miniature versions of maps that pop up when a user hovers their mouse over a map node. Here is an example of the kind of mini preview that could be generated for a relatively large and complex map (here’s the full size map).

I generated this from CompendiumLD using Apache’s Java SVG toolkit, Batik in an initial experiment I did in July 2010. The SVG produced by Batik looks fine when rendered by a user agent such as a browser, but it’s structure is not, e.g. the groupings it produced do not map to CompendiumLD’s semantics i.e. the nodes and links. However, to generate the SVG of this I took the simplest route I could which is essentially ‘painting’ the map as SVG using Batik. Further investigation is required to exploit Batik’s capabilities given that it seems to support most of SVG 1.1.

Opportunities, possibilities and prerequisites

The SVG format is designed for describing 2-D graphics, so any linked-node style of map should be realisable using SVG, including things like curved links which are introduced in Compendium 2.0 beta and of course raster images can be included in SVG (all the nodes in the mini preview example are raster images). And of course, SVG can be edited using a variety of tools, albeit general purpose SVG tools may not preserve the semantic attributes in a CompendiumLD SVG file, but would at least allow people to use an off the shelf (or web) tool that they’re familiar with. General purpose graphic design apps that can manipulate SVG will not offer all the functions that Compendium or CompendiumLD do (e.g. transclusions), but will offer a way for people to manipulate maps without having to install or learn how to use Compendium/CompendiumLD.

As my examples show, once a SVG rendering of a map (or a set of nested maps) exists, it is possible to embed it into a web page at different sizes, and to do user friendly stuff like small versions within the page and full screen versions, similar to the way that Slideshare slideshows and Youtube videos may be be embedded. However, the examples I’ve produced so far are either hand written with ‘good’ semantic structure (example) or program generated with little or no semantic structure (mini preview example). So, if this SVG approach is to be used, the first step needed is some more work on the structure of the SVG to make sure most user reqs are covered, probably via a mixture of hand coding and prototype program generation of example maps to get feedback on (the same goes for the CSS styling, scripts, and SVG definitions i.e. work on these four components). Note, this jQuery SVG plugin might be useful for the scripting.

Then there needs to be a way of making SVG versions of maps available, so that there is a source to be embedded. A relatively quick way would be to build on the shared MySql database already provided by Compendium and CompendiumLD (see Collaborative Compendium). This approach would require Java coding to automatically generate the SVG for each map, but use Compendium/CompendiumLD as the editing tool. I’m not sure, but a format like oEmbed might be useful to facilitate the embedding of nested SVG maps (more thought, playing around, and chats with Nick who has used oEmbed, needed).

Now some very brief thoughts about options requiring more effort e.g. a browser based editor. Use HTML5 (build on SVG edit code base?). Such an editor could ‘save’ locally to browser database, ‘publish’ to web site.

Notes about SVG support in browsers and other applications

The only current desktop browser that does not display SVG is Internet Explorer, but that will change when version 9 is released (summary of browser & plugin’s SVG capability as of 30/8/2101). If you are using IE9, make sure the brwoser mode and document mode are set to ‘IE9′ other wise you will not see the examples!

Note added on 15/9/2011 from SVG-developers mailing list:

"I think IE9 demands that you use a standards based DOCTYPE in the html in order
for iframe, object, embed etc to support SVG content".

For mobile devices, Apple’s iOS browser already handles SVG, and SVG support is here or coming for other mobile platforms (it’s coming in Android v3.0, and via Webkit for other platforms e.g. Blackberry, Symbian etc).

Desktop applications that can edit SVG include

• Inkscape (open source)
  well worth a try if you haven’t already imho, and also
• Adobe Illustrator
• CorelDraw.

Web based tools include SVG edit.