Hack 66 Render Graphics with SVG

With SVG, you can represent graphics as XML documents and render them in Internet Explorer with Adobe's SVG Viewer, in Netscape with Corel's SVG Viewer, in a branch of Mozilla that supports SVG, and in Batik's Squiggle.

Scalable Vector Graphics or SVG (http://www.w3.org/Graphics/SVG/) is an XML vocabulary for describing two-dimensional graphics. Using XML instead of one of a variety of proprietary graphical formats, SVG has enormous potential as a method for storing and transporting graphics. It was developed by the W3C and is currently at Version 1.1 (http://www.w3.org/TR/SVG11/).

SVG is popular and the number of implementations is steadily increasing. Adobe provides a popular browser plug-in, SVG Viewer 3.0, which runs on Windows and the Mac. (There is a rumor floating about that it will soon run on Linux.) Mozilla.org has a version of its browser, a branch off the main trunk of code, that supports SVG rendering natively (i.e., without a plug-in). Apache's Batik project offers an SVG browser written in Java.

Following is a simple example of an SVG document that renders some colored text, text.svg (Example 4-13):

Example 4-13. text.svg

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

   

<svg xmlns="http://www.w3.org/2000/svg"

     width="600px" height="300px" font-size="150px">

   

<rect fill="none" stroke="black" stroke-width="3"

      x="170" y="65" width="235px" height="125px"/>

   

<text fill="blue" x="290" y="180">G</text>

<text fill="green" x="230" y="180">V</text>

<text fill="red" x="170" y="180">S</text>

   

</svg>

Following the XML declaration is a document type declaration for the SVG 1.1 DTD. The document element is svg, and the namespace name is http://www.w3.org/2000/svg. The width and height attributes specify the dimensions of the rendering space; font-size is an SVG property that says that the font used in the document will be 150 pixels (px) high. Though a subset, properties in SVG are intentionally the same as those used by CSS and XSL-FO (http://www.w3.org/Style/). For a list of all SVG properties, see http://www.w3.org/TR/SVG/propidx.html.

The rect element lays out a rectangle that will be drawn on the rendering canvas. The outline of the 235 125 rectangle will be black and 3 pixels wide. The upper-left corner of the rectangle will begin at the X,Y coordinate 170,65.

Following the rectangle definition are three text elements, each with a different fill color. The x and y attributes specify the text's current position. The text in each element (one character per element) overlaps the character rendered before it. Figure 4-6 shows the SVG document text.svg rendered in Mozilla 1.7a, which is available for download from the Mozilla SVG Project page (http://www.mozilla.org/projects/svg/).

The main branch of Mozilla code, at the time of this writing, will not render SVG.

Figure 4-6. text.svg in Mozilla 1.7a

Adobe's SVG Viewer 3.0 is a browser plug-in that works with Internet Explorer 4.0 or higher on Windows (http://www.adobe.com/svg/). (It also reportedly works on Netscape Navigator or Communicator Versions 4.5 through 4.78 and RealPlayer 8 or higher, but I haven't tested it on any of those.) After downloading SVGView.exe, double-click on it, and it will install files under WINNT\system32\Adobe\SVG Viewer 3.0 and \Program Files\Common Files\Adobe\SVG Viewer 3.0\Plugins. For installation and usage information, read the file \WINNT\system32\Adobe\SVG Viewer 3.0/ReadMe.html.

Once the viewer is installed, you can open SVG files in IE. Mozilla doesn't support color gradients yet, but IE with SVG Viewer does. The file grad.svg defines gradients (Example 4-14), and is shown in Microsoft in Figure 4-7.

Example 4-14. grad.svg

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

   

<svg xmlns="http://www.w3.org/2000/svg"

     width="600px" height="300px" font-size="150px">

   

<defs>

   

 <!-- Red gradient -->

 <linearGradient id="redgrad">

  <stop offset="5%" stop-color="white" />

  <stop offset="90%" stop-color="red" />

 </linearGradient>

   

 <!-- Green gradient -->

 <linearGradient id="greengrad">

  <stop offset="5%" stop-color="white" />

  <stop offset="90%" stop-color="green" />

 </linearGradient>

   

 <!-- Blue gradient -->

 <linearGradient id="bluegrad">

  <stop offset="5%" stop-color="white" />

  <stop offset="90%" stop-color="blue" />

 </linearGradient>

   

</defs>

   

<rect fill="none" stroke="black" stroke-width="3"

      x="170" y="65" width="235px" height="125px"/>

   

<text fill="url(#bluegrad)" x="290" y="180">G</text>

<text fill="url(#greengrad)" x="230" y="180">V</text>

<text fill="url(#redgrad)" x="170" y="180">S</text>

   

</svg>

A defs element encloses three linearGradient elements. The ids on these elements each contains a name that is referenced later in the fill attributes of the three text elements (for example, the id bluegrad is referenced with fill="url(#bluegrad)").

A gradient is a smooth blend from one color to another, as shown in Figure 4-7. A linear gradient defines a transition of color from one point or stop to another. You need at least two stop elements to define a linear gradient in SVG. The stop-color properties indicate the color for a gradient stop. The offset attribute indicates the location where stop is placed, and is represented either as a percentage or as a value between 0 and 1.

Figure 4-7. grad.svg in IE with Adobe's SVG Viewer

On Windows, you can also view SVG in IE and Netscape 7.1 with Corel's SVG Viewer (http://www.smartgraphics.com/Viewer_prod_info.shtml). If you install Corel's viewer, it will replace the Adobe viewer. The viewer is installed simultaneously for both IE and Netscape. Figure 4-8 shows grad.svg in Netscape 7.1 with the Corel viewer installed.

Figure 4-8. grad.svg in Netscape 7.1 with Corel's SVG Viewer

Apache's Batik project is a Java toolkit that can help applications render or generate SVG (http://xml.apache.org/batik/). After downloading and installing Batik, enter this line at a command prompt to start the Squiggle SVG browser and view the document batikBatik.svg from the sample directory:

java -jar batik-squiggle.jar samples/batikBatik.svg

Figure 4-9 shows the Squiggle browser. Use Squiggle to display other SVG files in the samples directory. Looking at the SVG source for these example files in an editor will help you get familiar with SVG techniques.