SVGMed - SVG for Medical Science

For the SVG Open 2010 conference

Sushant Priyadarshi

Masters Student
San Jose State University ,Department of Computer Science

              One Washinton Square
              San Jose


The "Human Systems Explorer" [1] is a web based teaching tool developed by "Center for Educational Technology" for Harvard Medical School. The purpose of this tool is to visually explain the difficult concepts in the medical science field. It comprises of many interactive diagrams which are made available through Harvard Medical School's web portal. The basic goal of this tool is to help students visualize the clinical relevance of all the concepts they learn rather than just studying static diagrams through books. I propose an application which shows the benefits of using XML and SVG technologies combined with JavaScript scripting in making the diagrams involved in medical science more interactive, dynamic and accurate.

For my project i have chosen a relatively complex and an important field in medical science which is study of "Human Body Blood Circulation System" requiring very high degree of precision labeling. The main components of circulatory system are the heart, the blood and the blood vessels. The veins are the blood vessels that carry deoxygenated blood towards the heart and arteries are blood vessels that carry oxygenated blood away from the heart. A typical diagrammatic representation of circulatory system consists of intertwined veins and arteries making it very difficult to distinguish. In this paper, I intend to report on my effort to convert the existing system of medical diagram representation into a more interactive, accurate and efficient way using SVG, prototype development of human circulatory system, and future benefits of using SVG for the medical science. These kind of effective interactive diagrams when channelized into proper online resource will reap huge benefits for medical students as well as for the industry.

Table of Contents

Introduction and Motivation
Prior Work
Target audience and language
Description of Functionalities
Sample Prototype Snapshot
Technical Details
Conclusion and Future Work

Diagrams play a very pivotal role in medical science and with the advancement of electronic media, online resources have become an indispensable part of medical students. Web based interactive diagrams not only serves the purpose of easy availibility but also gives a visual cue for the concept to the students.There are other famous online resources which offer medical illustrations with use of static picture diagrams (e.g. This creates a void between the student's expectations and what is being offered because a medical student may wish to get an image that has lot of interactivity features such as an image becomes more detailed as the resolution changes (as by a user-initiated zoom event).

In a medical diagram, as you zoom in, a heart for example may resolve into a more complex network of arteries and veins having labels show up only at a certain level of zooming which is basically known as LOD (Level of Detail). And this is the area where SVG can do wonders for medical science. With the increasing support of SVG in a wide variety of browsers, it seems very feasible and beneficial to use SVG for complex diagrams in medical science.The purpose of this paper is to implement "Human Body Blood Circulation System" with the help of SVG and to show how medical diagrams can be made more interactive, accurate and easily available having low maintainability issues. SVG has certain qualities which has not been used to its full potential in medical science as pointed out in [5]:-

  • Flexibility: Commercial graphical tools support SVG for complete flexibility in creating customised UIs

  • Efficiency: SVG enables UIs to be easily created and modified without the constraints of traditional UI development tools which require engineering time and effort. In addition, greater re-use is encouraged.

  • Quality: The perceived quality of the UI is greatly enhanced when graphical design experts are used.

  • Liberates existing applications: Tested legacy applications can be deployed to different customers with ease.

  • Hardware independence: The entire application can be developed within a PC environment before being moved to the receiver hardware

  • Complete UI reassurance: Enhanced SVG features dramatically reduce the possibility of UI problems once the product has been deployed, resulting in optimal consumer satisfaction and reduced support calls and product returns

  • Increased speed to market: The features provided by SVG enable customised UIs to be built, simulated and tested in previously unachievable time scales.

Curently all the diagrams in the "Human Systems Explorer" are made first using Adobe Illustrator, Adobe Fireworks, or Adobe Photoshop and then imported into Flash. The responce of diagrams are fully based upon the prepogrammed values and thus are not reponsive to dynamic data. The amount of work done to even change a small part of existing diagram is a lot. And the use of Flash has a bigger disadvantage for the medical students who use mobile phones for web browsing since many web applications does not support Flash like Apple's newly launched iPad and iPhone. Apple has adopted to HTML5, CSS and JavaScript which are all open standards. Majority of tools/sites offering interactive diagrams are based on flash players and quiet a few uses javascript [2].

There are other famous online resources which offer medical illustrations with use of static picture diagrams ( Wikipedia has started using SVG for few of its diagrams involving medicine but with very little interactivity[6].

Apart from the ideas mentioned in the Introduction and Abstract, the general concept of the prototype application "SVGMed" has been summarized in this section.

The prototype application was implemented to be user friendly, accurate , clear and informative as much as possible. If a user moves the cursor on any of the label, the description panel will automatically show the detailed description of that part. In addition to that the image panel will show a more detailed picture of that part (this picture can be in any format). The idea is to provide more detailed information of any body part.

The user will have an option of zooming in and out through the scroll bar provided. The user will be shown more labels (Level Of Detail) as he zooms in. The idea is to watch the medical diagrams just like an interactive map where the user has a total control over his views. The system will react to the selections made by the user to make the appearence less cumbersome.

Summary of basic functionalities are :-

Sample Prototype Snapshot

Prototype Snapshot

Figure 1. SVGMed Prototype

Technical details

Data of the "Description Panel" has been stored in XML format. The XML data source contains the details of all the veins and arteries which has to be displayed in the "Description Panel". This adds flexibility to the system by the fact that if anyone wants to edit the information being displayed, only XML data file had to be changed which should be easy for anyone.

var myFlowText=x[0].childNodes[0].nodeValue;

A code snippet of xml data source has been shown below :-

		<v1>The SUBCLAVIAN VEINS are two large veins, one on either side of the body.........
		<a1>The VERTEBRAL ARTERIES are major arteries of the neck. They branch from..........

Example 2: Mouseover and Onclick events

In order to trigger the execution of javascripts one can use event handler attributes. These event handler attributes are compatible with SVG. Examples are onmouseover, onmouseout, onmousemove, onclick and onload. The below SVG-code shows use of mouseover and onclick events.

<text transform="matrix(1 0 0 1 401.2803 562.5708)" font-family="'Arial'" font-size="13" onmouseover="show_description('V11')">Femoral vein</text>
<text fill="pink" x="670" y="400" onclick="change_layer('show','veins')">Show Veins</text>		  

Example 3: Use of DOM

In order to change SVG-elements per javascript one needs to first reference them. This was done using the DOM-tree and DOM methods like document.getElementById(). Below code sample shows the use of of DOM for manipulating elements.

var svgobj = document.getElementById(element_name);
else if(action=="hide")
var textNodebase = document.getElementById("test");

Example 4: Creation of tspan elements

The ECMAScript function (textFlow) has been used to create flow text. A text node, maximal width of the text block and dy values as to be specified. The script creates tspan elements [7] as needed and does automatic line breaks onec a line is full. Below code snippet shows its use:

var textNodeCentered = document.createElementNS(svgNS,"text");
var svgobj = document.getElementById("vein");
var dy = textFlow(myFlowText,textNodeCentered,300,750,15,false);


Conclusion and Future Work

My work will show a better way of displaying medical diagrams making it more interactive and manageable by using SVG. As showed in the prototype implementation, SVG combined with JAVASCRIPT and XML can used with a lot of precision for medical diagrams. Medical students can take a step forward from the existing system of static images in the book to the more accessible, robust and interactive diagrams made available in web by using the power of SVG.

Having said that, there are still lot of scope to do improvements since medicine is a vast and complex field having uncountable number of diagrams. My work needs to be extended in order to synchronize the process of making good SVG based medical diagrams. Other aspect of improvement is how to channelize the power of SVG in business point of view. Organizations can capitalise on this opprtunity with great success as this has been shown by the "Human System Explorer" in these years. Considering the fact that Flash which is a famous alternative right now, is a proprietary technology of Adobe which makes it a closed system as compared to XML, javascript and SVG. As Flash cannot work in many mobile applications,its certainly a hindrance of making the diagrams in medical science available "on the go" for the medical students. It would be interesting to see how publishers capitaize over these shortcomings by using SVG to showcase their medical illustrations.