Medical Computing > Scalable Vector Graphics

Introduction to Presenting Scientific and Medical Data on the Web using Scalable Vector Graphics (Continued)

Hello World

Let's try the most basic SVG example. The circle shown below is from the document circle.svg. You can view it in a browser or SVG viewer by itself or within this HTML page below.

Simple SVG Document with a Circle

The the extent of the SVG document is shown by the HTML table border. The SVG document is embedded within this HTML page with the element


<embed src="svg/circle.svg" type="image/svg+xml" height="200" width="300">

This embed tag specifies the source of the file "svg/circle.svg" and the type "image/svg+xml". The height and width are of the area to be provided to the SVG document are given in pixels. The code for this within the SVG document is


1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
2   <circle cx="150" cy="100" r="50" fill="none" stroke="black" stroke-width="2"/>
3 </svg>

Line 1 is the SVG declaration, containing the 'svg' document element. An SVG document fragment is defined as any number of SVG elements contained within an 'svg' document element. The SVG namespace should always be http://www.w3.org/2000/svg. No namespace prefix (as in 'svg:svg') is used in this example. The width and height elements, again in pixels, can match the height and width specified in the embed tag, be smaller, or larger. It is common to make the SVG document the same size as the area it is given by using a percentage, as in width="100%" height="100%". Other units are possible, including millimeters, for example '16mm', and centimeters, for example, '1cm'.

The single element in this SVG document that gives it content is the circle tag used on line 2. It specifies the x-ordinate, cx, the y-ordinate, cy, and the radius, r. The origin (0, 0) is the upper left corner with the x-axis running to the right and the y-axis running vertically down the page. The fill is set to none. Not giving a value for this would have filled in the circle by default. Possible fill types other than none and solid are gradient and pattern. The stroke is set to black and the stroke width set to 2.

I suggest saving the file to your own system and embedding it within your own HTML. You will find that if you save it to a HTTP server you will need to set the .svg file extension on the server to be "image/svg+xml" to be displayed correctly in Firefox. IE / Adobe seems to be more tolerant. It is also possible to compress SVG files with gzip and use the extension ".svgz".

Previous Next Contents
References

Please send me ideas and
opinions by email at webmaster@medicalcomputing.net or add comments to my blog. The content may become part of the web site.

© Alex Amies 2006