SVG NHS Trust Management Structure

Using SVG to display the Management Structure of an NHS Trust

At the bottom of this page there are links to three images. These are dynamically created by javascripts using the resources of your computer from this OWL file, created using Protégé, and they both detail the management structure of an NHS Trust. The management structure is now out of date and the details are not correct with the phone numbers created using this and the names created using this.

The first link calls a HTML file which encapsulates a pretty much blank SVG which calls two scripts: the first calls the MSXML parser to read the OWL and give it the data it needs to create the picture; the second was developed by Peter Sorotokin at Adobe and allows for scrollbars to be used in the SVG image.

The second link calls a near identical copy of the SVG file previously used and then uses the XML parsing abilities of the Adobe plug-in to read the data from the OWL in order to draw the picture. Because we're not using MSXML we don't need to encapsulate the image in an HTML document but we could do if we so desired.

The third link uses the same techniques as the second but uses some javascript optimization methods taken from here. This link compromises my attempts to make the page quicker to load.

All images time themselves in microseconds in order to give an idea about how quick each approach is. Generally (and please email me if this isn't the case for you), the method without MSXML is quicker. This approach should mean that it is also more accessible to users of other browsers, but this has yet to be tested.

To navigate within an SVG document:

To move the SVG graphic, hold the Shift key down while you drag the mouse to move the graphic.
To enlarge an SVG graphic, hold the CTRL key while you click on the area of the graphic you wish to enlarge.
To enlarge a section of the graphic, hold the CTRL key while you drag the mouse across the area you wish to enlarge.
To make the graphic smaller, hold both the Shift and the CRTL keys down while you click anywhere in the graphic.

Using MSXML.

Using Adobe.

Using Adobe with javascript Optimization.

While researching other solutions I came across Microsoft's Visio and from this csv file produced this. I also produced this SVG which stitches all the elements together in one diagram. This contrasts with my first attempt carried out in freehand using CorelDRAW 11.