Create dynamic images with SVG and XSL

by Brian Schaffner | Jan 21, 2003 8:00:00 AM

Tags: technique, Brian Schaffner, SVG, XSL, XML, image, Scalable Vector Graphics image

Takeaway: Delivering GIFs and JPEGs via XML is no walk in the park, especially when compared to the ease of delivering Scalable Vector Graphics (SVG). Find out how to convert SVG images into an XSL template.

Editor’s note: This article originally appeared on Builder.com.

Delivering graphics with XML can be cumbersome if you're using older graphics formats, such as GIF and JPEG. But with Scalable Vector Graphics (SVG), it's a breeze. Because SVG is an XML grammar specification, you can create custom dynamic SVG images using just a little XSL.

The SVG template
The technique is based on creating an SVG template and modifying its contents to produce a new SVG image. To start the process, you’ll need a base image to work from. You can use a variety of tools, such as WebDraw from JASC, to create your starting image. In fact, you can also use any text editor because all SVG images are just XML.

Listing A shows a simple SVG button, which you’ll use as the base template for this process. If you load this document into an SVG browser, you’ll see a simple blue button that says Button. If you click the button, it will take you to the TechRepublic.com home page.

Source data as XML
You’ll begin by converting this SVG document into an XSL template. The template basically splits the image into two parts: The static part is the XSL template, and the dynamic part is an XML document you'll use to drive the transformation. There are two components to this image that you want to affect dynamically—the URL and the text of the button. A new XML document, shown in Listing B, contains the dynamic source data.

As you can see, the new button will sport the text Google and a link to the popular search engine. The next step is to convert the SVG image into an XSL template. Essentially, you’ll make the link and the button text dynamic by pulling that data from the XML document. Listing C shows the XSL template.

The XSL template has revamped the original SVG document and made it more dynamic. This is a simple transformation that uses only a single-element template. When processed, the link will be populated with the element /button/url in the source document, and the button text will be the value from the /button/text element.

Transforming XML into SVG
There are many ways to actually process the source XML and XSL template. In practice, you'll most likely use the Xalan APIs to transform the XSL and XML into an SVG document via programming. For demonstration purposes, use the Xalan command line. To run this process, type the following at a command prompt:
java org.apache.xalan.xslt.Process -IN custombutton.xml -XSL button.xsl -OUT custombutton.svg

The result of this process should look similar to the SVG document in Listing D.

Displaying SVGs on the Web
Contrary to popular belief, you can use SVG graphics on Web pages. Instead of being implemented as source files for <img> tags, they're implemented as embedded objects. Listing E shows a simple Web page that displays the new SVG image.

4 comment(s)