Last week we were cruel and unusual -- we gave you a chunk of Scalable Vector Graphics code but put off explaining it until this week.

Now where were we. . . . The code:

<?xml version="1.0" encoding="iso-8859-1"?>

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

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

These are standard declarations that declare this is XML and that specify the Document Type Definition. DTD is a set of rules that define elements and attributes of an XML document and spell out how valid documents are structured. In effect, a DTD provides an integrity check on a specific type of XML content.

<svg xml:space="preserve" width="3in" height="3in"> . . .

This block defines the actual SVG code. Note xml:space="preserve" in the opening tag. Xml:space is a new XML tag attribute that defines whether white space (spaces, tabs and others) should be preserved by the process that parses XML.

If it is set to "preserve" then the white space should be passed through to the application - here, the SVG interpreter.

The parameters width="3in"height="3in" define the window in the document where the rendered SVG will be displayed. So inside the block:

<text style="fill:blue;" y="15">Gearhead was here.

This specifies that the text is to be rendered in blue, in the default font and default font size, with a baseline 15 pixels from the top left corner of the display area (the origin). Next, we get tricky:

<text font-family="serif" font-size=" 12pt"fill="black"

x="0" y="0"

transform="rotate(-90) translate(-100, 180) scale(1.5, 1)">

Cool.

</text>

Here we're defining 12 point, black text in the default font in the serif family to read "Cool." We're moving the text down and to the right relative to the origin, rotating it 90 degrees counterclockwise and stretching it by 50 percent along its original baseline.

This demo shows the basics of text and transformations under SVG. With SVG, there are three basic drawing elements: text, shapes and paths. Shapes include circles, squares and so on, while paths are chains of line segments that can optionally be specified as closed.

You may have already surmised that SVG files, while relatively small, get complex very quickly. Hand coding SVG graphics is not for the faint of heart.

To this end, a number of graphics tools have become available that support SVG images - for example, editors such as Adobe Systems Inc.'s Illustrator 9.0 and Jasc Software Inc.'s WebDraw (see the W3C Web page on SVG editor implementations at www.w3.org/Graphics/SVG/SVG-Implementations#edit); and a number of viewers, including the Adobe one mentioned last week (see www.w3.org/Graphics/SVG/SVG-Implementations#viewer for a long list of viewers, many of which are open source and written in Java).

SVG is a standard to watch. Next week, we'll look at dynamic SVG.

Do as you're told: Write to gearhead@gibbs.com.

» posted by ITworld staff

Network World

• Email
• Print
• Share
  • Slashdot
  • Digg
  • Stumble
  • Reddit
  • Newsvine