Perl Graphics Programming

The Basic SVG Tags

This section provides a basic overview of a subset of the SVG specification. Because it is next to impossible to condense a 600-page technical specification (http://www.w3.org/2000/svg) into 10 pages, this section describes a set of core concepts around the following types of SVG elements:

• Structural elements

• Basic shape and path elements

• Textual elements

• Linking elements

Several more-complex or less frequently used topics are not covered here, such as:

• Gradients and filters

• Embedded font glyph data

• Clipping and masking

• Color management

All of the elements have a set of common attributes that are not necessarily listed in the attribute charts. For example, any element can be given a unique identifier (so that it can be referenced by scripts or hyperlinks). This identifier is assigned with the id attribute:

<!-- Define an arced path -->
<path id="path1"
      d="M50,200 A150,150 0 1,0 350,200"
      fill="none" stroke="black" />

<!-- Reference a previously defined path -->
<textPath xlink:href="#path1">Some text on a path</textPath>

Most elements have additional attributes that describe optional language space and style attributes. These attributes are indexed in the SVG specification. For a more complete introduction to SVG, read SVG Essentials by J. David Eisenberg (O’Reilly).

Structural Tags

The structural tags define the basic building blocks of an SVG document: the top-level viewport, groups, definition blocks, and tags for labeling sections of code.

Example 6-1 draws four brightly ...