This document introduces presentation of scientific and
medical data
on the Web using Scalable Vector Graphics (SVG). It covers
comparison with other technologies for similar purposes, integration of
the SVG documents into HTML pages, explanation of the most basic
possible examples, and the development of an example for interactive
presentation of action potentials within the human nervous
system.
The
intended audience is people in science and medicine wanting to present
numerical or graphical material in an interactive way over the web.
SVG is an XML language for describing graphics and supporting graphical user interaction. It focuses on two-dimensional graphics and is easily embedded into HTML pages to be served up from web servers. It forms an excellent complement to the text based information that is best presented in HTML. User interaction can be facilitated using JavaScript in the same way as HTML documents do and SVG document fragments can be linked together with a href tag that is similar to the familiar HTML href tag. In this tutorial I will describe an approach to creation of the interactive graphical presentation of scientific and medical data using SVG.
In the accompanying article The Nernst Equation and Action Potentials in the Nervous System I discussed modeling of the electrical and ion concentration gradients. In addition, I covered the code development for that interactive part of the Web interface using JavaScript for computation of the Nernst equation and cascading style sheets for the layout of the mathematical equation in the tutorial Getting Started Developing Interactive Web Interfaces for Scientific and Medical Applications. This tutorial will describe the development of that interactive graphical presentation of action potentials.
There are a number of reasonable technology choices for Web based presentation of scientific and medical data. SVG is a standards based technology suitable for presentation of graphical data within HTML pages and relatively easily developed. These are good reasons to choose SVG over technologies such as Flash and Microsoft Excel but the most important is user experience. A comparison with other technologies is listed in the table below.
| Technology | Vendors / Projects |
Development | User Experience |
|---|---|---|---|
| SVG | Mozilla Foundation, Adobe (IE), others | XML based with standard JavaScript.
Generation with eXtensible Style Sheets (XSLT) or some other method may
needed for
repetitive
data. |
Lightweight plug-in required for IE. Native support in Firefox. A standalone desktop implementations are available as well. The pros are that it loads fast and is easily incorporated into HTML pages. The cons are that some users may not be willing to install a plug-in. |
| Flash | Adobe (formerly Macromedia) |
Proprietary script. Primarily
intended for applications, such as games. |
The pro is that very fancy graphics possible. The con is that integration with rich informational content in standard HTML pages may be difficult and is often neglected by developers steered by the platform into creating more 'flashy' user interfaces. |
| Excel | Microsoft | Graphical user interface for development
of basic graphs. Incorporation of user interaction most often
with Visual Basic. |
The pro is that many users are familiar with the technolgy and they can extend the use of the data through standard features. The cons are that users must have Excel already installed and that some security risks are present that go beyond the normal risk of web pages with JavaScript. Many corporate firewalls are configured to strip spreadsheets. |
| Java Applet | Sun Microsystems, IBM, others | Full fledged object oriented programming
language. |
The pro is that very rich user interfaces can be provided for sophisticated interaction. The con is that it is heavy weight (20+ MB for the plug-in) with slow loading times and that conflicts between required versions are not uncommon. Its use is difficult to justify by only simple or casual use by users with little time, patience, or skill. |
| PNG and GIF | Numerous | Server generated. You may need more control over the server than you are allowed for a low cost ISP hosted web site. With substantial development work interaction is possible via image maps but users have to wait for a round trip to the server. AJAX may solve this but that may involve even more substantial development effort. | The pro no plug-ins required. The absolute most convenient for casual users require nothing more than a standard browser. This is the most common approach for web based financial information, such as stock quotes. The con is that this approach lacks user interaction. |
SVG allows a rich variety of features:
SVG supports vector graphic shapes (straight lines, rectangles,
circles, ellipses, and curves),
images (png, gif, and jpg), and text. Objects can be grouped, styled,
transformed and
combined. The SVG Document Object Model (DOM) allows complete
access to discover and change all elements, attributes, and properties
in a similar way to the HTML DOM does in recent browser releases.
SVG documents can also be used within other XML documents, such as
Mathematical Markup Language.
The vector nature of SVG (i.e. the 'V' in SVG) leads to the graphic
images being scalable. In other words the images are not limited
to a single, fixed, pixel size in the same way that gif, jpg, and png
graphics area. SVG drawings can be stretched, shrunk, and
enlarged without deterioration of the display quality. They are
also easy to print out, in contrast to some of the other platforms
discussed above, such as Java Applets, and Flash. Although SVG
drawings are compact they are saved without any loss in quality in the
same way that jpg images, for example, are compressed.
The current standard for SVG is the World Wide Web Consortium
(W3C)
Scalable Vector Graphics (SVG) 1.1 Specification2.
Implementations of SVG are available at the Adobe SVG page1 and the Mozilla
Developer Center3.
A reasonable reference with plenty of sample code is Campesato's book
Fundamentals of SVG
Programming: Concepts to Source Code4. Static
drawings can be created using the elements described in the SVG
Standard alone but scripting is done with other languages, usually
JavaScript. SVG shares the W3C Document Object Model (DOM)
Level 2 Core Specification5. SVG
documents can also be styled using Cascading Style Sheets (CSS)
Level 26. See the
article Getting
Started Developing Interactive Web Interfaces for Scientific and
Medical Applications for more on working with JavaScript, CSS, and
DOM. The W3C XML Linking Language (XLink) Recommendation7 covers linking XML documents
and positions within XML documents.
In the sections that follow I will walk through several examples, starting out with a very simple one. For each example I will walk through the code.