Enterprise Software

Draw and annotate in your browser using SVG

SVG is a language for describing 2-D graphics in XML, and it lets you treat a browser like a drawing or painting tool. Although not supported by current browsers, SVG functionality is available via free plug-ins. This tutorial puts SVG through its paces.


By Pramod Jain

Imagine doing the following in a browser: typing text anywhere (not just inside form fields), drawing a shape, or drawing a path with a mouse. That is, treating a browser like a drawing or painting tool, with the additional ability to save the drawing in a database. Draw and save. This is possible with Scalable Vector Graphics (SVG), a 2-D Web graphics standard recommended by W3C in September 2001.

Such a capability is useful in annotating images displayed on the Web. Commercial applications of this technology include annotating medical images, maps, and scanned documents.

Although current popular browsers like IE and Netscape do not directly render SVG, browser plug-ins are available from Adobe (SVG Viewer) and others that will render an SVG document. Since SVG is a W3C standard, I expect that it will soon be an integral functionality of future releases of browsers.

SVG basics
SVG images are vector graphics, which means that all the graphical information is stored in a sequence of commands to draw lines, shapes, and other objects. This information is eventually converted to application-specific bitmaps, also called raster graphics. The task of converting an SVG image to a raster image is accomplished with a browser (plug-in). Note that this is different from bitmap-based graphics like GIFs or JPEGs, which must be generated on the server and delivered to the client as bitmap images.

SVG images are also scalable. Zooming in on an SVG image does not distort the image (display jagged edges) because instructions to redraw the image, rather than bitmap pixel values, are sent to the rendering program.

How does SVG let you draw in a browser?
An SVG file is in XML format. When it is delivered to a browser/SVG plug-in, all the contents are stored in the Document Object Model (DOM). SVG provides an API to capture mouse and keyboard events and manipulate the DOM. Let's look at an example that illustrates this.

XML format for vector graphics commands
Listing A provides a glimpse of the XML style syntax. It is like an object model for a business entity, with drawing properties and object properties. When this file is opened in a browser with an SVG plug-in, you will see a circle. To test this, download and install the SVG plug-in from the Adobe Web site. Then, create a new file, Circle.svg, copy the code into the file, and open the file from your Web browser.

Manipulating the DOM
DOM is an API for accessing, adding, deleting, and changing the contents of the SVG-XML document. When a browser reads Circle.svg, for example, the DOM in the SVG plug-in gets populated with all the information contained in the file, and then the circle is rendered in the browser. One of the ways of manipulating the contents of the DOM, which contains the circle, is to use the API provided by SVG. For an example of this, look at the JavaScript program shown in Listing B. It will draw a line in addition to the circle when the page loads.

The API also provides a mechanism to handle events like onmousedown, onmousemove, and onmouseup. For instance, look at the SVG-XML file with three JavaScript functions shown in Listing C. This example illustrates how mouse events can be captured using the SVG API and how the DOM can be changed.

Note that although we included the OMM() function for illustration purposes, we didn't provide any code for it. You could use this function rather than OMU() and OMD() if you wanted to draw a path instead of a line. You can also capture the onclick, onkeydown, and onkeyup mouse and keyboard events.

Basically, this is the mechanism for drawing on a browser:
  • ·        Capture mouse (or keyboard) events.
  • ·        Capture mouse coordinates or keyboard information.
  • ·        Change the DOM.

When the DOM is changed, the plug-in notifies the browser to draw the new element in DOM.

SVG in motion
SVG also supports animation. Consider Listing D, for example, where a mouse click will increase the radius of the ball from 100 to 200 in one second.

 

What about data?
Although our examples have focused on using the DOM to manipulate graphical information, you can also use it to interact with databases. The elements and data in the DOM can be collected using JavaScript and sent to a database when the form is submitted to the server.

Conclusion
Browser-based interfaces to business applications allow only a limited number of input controls, such as text boxes, pull-downs, and radio buttons. SVG can open the door for substantially richer user interactions—from typing text anywhere in a browser to drawing regular figures like circles, lines, and rectangles, to drawing freehand or writing notes in the margin using a stylus on a touch screen.

Popular browsers like IE and Netscape don't currently render SVG directly. But SVG is a W3C standard, so that functionality will probably be integrated into those browsers in the not-too-distant future.

Editor's Picks

Free Newsletters, In your Inbox