RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building 2-D Graphics Applications Using Java and SVG

If you're tired of generating static bandwidth-heavy JPG files for charts, maps, and other graphic images in your Web applications, SVG provides a way to display and interact with dynamically-generated graphics in a browser.


s Web applications become more sophisticated, developers increasingly need to be able to incorporate dynamic graphics and animation. Unfortunately, Web browsers were originally designed to display static HTML; displaying dynamic or animated content has always been a problem in Web applications.

Nevertheless, solutions exist. One way to display dynamic content is to use Scalable Vector Graphics (SVG), a fairly recent (and still evolving) standard pioneered by Adobe, Sun Microsystems, Apple, IBM, and Kodak. SVG is basically an XML-based representation of graphical commands, used to define complex shapes such as Bezier curves. At SVG's heart lies the world of vector-based mathematics, hence the name. The beauty of this technology is its minuscule bandwidth consumption as compared to alternatives such as dynamic jpeg file generation using Java and other graphic APIs. SVG also rivals Flash, by providing high-quality panning and zooming.

SVG can be displayed in common Web browsers, although (depending on the browser version) doing so may require a free downloadable SVG plugin from Adobe, called SVG viewer.

Author's Note: Although other SVG viewers are available, none are even close rivals to the Adobe viewer.

Another great advantage of SVG is that you can integrate it with Java easily. In this article, you'll see how simple it is to render dynamic graphics for display in Web browsers using SVG with JSPs by exploring how to generate a Pareto chart in SVG.

What You Need
Tomcat, and Adobe's free SVG Viewer. Even if you're not planning to work with the sample project, you'll need to install the viewer to be able to view the SVG examples in this article.

Sample Project Overview
Figure 1. Default View of Logo.svg: This SVG file showcases curves, rectangles, text on a path, and color animation.
The sample project for this article uses a Web-based UI to get user input which it then processes to construct a Pareto chart. Kerri Simon, in this article, writes: "A Pareto chart is used to graphically summarize and display the relative importance of the differences between groups of data." When the user clicks a "Generate" button on the UI, a JSP page renders the SVG for the chart dynamically. Using similar processing techniques, you can build any type of chart or 2-D image.

If you're not familiar with SVG, it's worth starting by viewing a simple SVG file. Install the Adobe SVG viewer, download the sample code, unzip it, and open the logo.svg file in your browser. You'll see the display shown in Figure 1.

Author's Note: Based on your browser's security settings, you may need to give the browser permission to open the SVG. This code has been tested on IE5.5 and above, and on Mozilla Firefox 1.0.4, with the SVG viewer plugin from Adobe installed.

Figure 2. This figure shows the logo.svg file after a user has zoomed into the image using the features added to the browser's context menu by the SVG plugin.
While Figure 1 shows the default view of the logo.svg file, Figure 2 shows a zoomed view. Note that you get the zoom feature by default—you don't have to add any special code to the SVG file to provide zooming features.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date