The artist in you
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:
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.
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.