Home | Business News | Browse by Publication | X | XML Journal

Data driven Web graphics with SVG: a declarative approach; create and edit graphics/annotations on your browser.

Article Excerpt
Scalable Vector Graphics is likely to way Web graphics are rendered, stored, manipulated, and associated with content. SVG, a 2D portable Web graphics standard recommended by the W3C in September 2001, is an XML-based standard for specifying both graphics and content. SVG replaces server-side image file creation or applet-based graphics with client/Web browser-based rendering of images.

This article focuses on Web annotation applications in which users draw on a Web browser and associate properties with the drawing. The graphical and nongraphical (business) properties of the annotations created by users are stored in a database.

The appeal of SVG is that it's data driven, not bitmap driven, meaning that the graphical content of an image is described in SVG as a sequence of commands to draw a line from one point to another, draw a circle with a specified center and radius, and so on. Thus the entire SVG image is created, stored, and rendered using commands and data in an XML format.

This article presents a declarative approach to creating a middle tier for SVG applications. The J2EE/XML-based middle tier:

* Updates data sources (relational databases, EJB, and/or Java objects) with data in SVG files

* Delivers SVG XML files with graphics and business data extracted from data sources.

The declarative approach requires no coding in Java or VB. Instead, the SVG application is created by declaratively specifying:

* Data sources (relational databases, EJB, Java objects, and others)

* Data methods (SQL, stored procedures, Java objects) for retrieving data from and updating data into data sources

* Tag-based JSP or XSL-based transformations for placing collected data into an SVG XML file

The intent of this article is to provide insight into the rapid development of SVG-based Web applications that contain both graphical and business content. Applications of this approach include Web simulation, Web charting, Web reporting, and Web-based image annotation.

The Appeal of SVG

Although currently popular browsers like Internet Explorer and Netscape don't render SVG directly, plug-ins to the browsers from Adobe (SVG Viewer) and others will render an SVG document. We believe that because SVG is a W3C standard, it will be supported by future releases of browsers.

SVG has a number of characteristics that make it appealing for Web graphics -- for example, vector graphics. All the graphical information is stored in a sequence of commands to draw lines, shapes, and other objects. This information is eventually converted to a display application-specific bitmap, also called raster graphics. SVG is converted to a raster image by a vendor-specific program.

SVG is also scalable. Zooming into an SVG image doesn't distort the image (by producing jagged edges) because redrawing instructions are sent to the rendering program, rather than pixel values in a bitmap.

Being XML-based, SVG is data driven. It specifies an XML format for vector graphics commands. In addition, the SVG XML file can include business data tied to the graphical objects. Listing 1 is a simple SVG code for creating a ball object by first creating a graphical element -- a circle -- and associating properties like weight, material, and price with it. (To try out the example, download the SVG plug-in for your browser [one source for the plug-in is www.adobe.com]; create a new file, circle.svg; copy the code into the file; open it from the Web browser. All the examples have been tested on IE5.5 with Adobe's SVGViewer.)

LISTING 1 Sample SVG file with graphical and business properties 33.0 ounce rubber $0.50

Data driven in this case means that the center of the circle and the radius are specified explicitly. SVG makes Web graphics declarative: an SVG XML file declaratively specifies the properties of a drawing element. This is substantially different from bitmap-based graphics like GIFs or JPEGs.

SVG is like HTML in that the source code for...

View this article FREE - Now for a Limited Time, try Goliath Business News
Free for 3 Days!