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/).
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
id
s 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.
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.
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.
“Generate SVG with XSLT [Hack #54]
Sun’s Introduction to SVG: http://wwws.sun.com/software/xml/developers/svg/
SVG Essentials, by David Eisenberg (O’Reilly)
Get XML Hacks now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.