Defining objects, such as text and shapes, in an SVG image is relatively straightforward. As an SVG developer, you could hand-code a lot of this (or develop programs to dynamically generate image objects), but there are alternatives. For example, Adobe® Illustrator® 9.0 lets you generate complex images easily by simply exporting your Illustrator files as SVG. However, a general understanding of how SVG objects are defined, and what the various coordinates and elements refer to, can be particularly valuable when you are considering animation and interactivity.

Let's take a look at some typical SVG code. As XML, SVG is written much as HTML, with opening and closing tags, and nested tags within tags. Every SVG file is contained within an <svg> outermost element, and as such, can be embedded inline as a fragment within a parent document (an XML Web page) or as a standalone, self-contained graphics file. For example, the following shows the outermost structure of an SVG document as a standalone file:

<?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">
<svg xml:space="preserve" width="5.5in" height=".5in">
...
</svg>

The first line establishes the code that follows as XML. The second line provides a reference for the DTD or Document Type Definition. The DTD is a set of rules that defines elements and attributes, and specifies how to form valid documents and structures.

Within the <svg> element, there can be three basic types of drawing elements: text, shapes, and paths. These are defined in a straightforward fashion. For example, the following description:

<?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">
<svg xml:space="preserve" width="5.5in" height=".5in">
<text style="fill:red;" y="15">This is SVG.</text>
</svg>

produces this result:

The text is positioned in an image area that is 5.5 inches wide by .5 inches tall, with its baseline 15 pixels down from the top.

The following example produces a blue rectangle with its top left corner aligning with the top left corner of the image area (the default when no coordinates are specified).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg xml:space="preserve" width="5.5in" height="2in">
<rect style="fill:blue;" width="250" height="100"/>
</svg>

Paths are described using the following data attributes: "moveto" (set a new current point), "lineto" (draw a straight line), "curveto" (draw a curve using a cubic Bezier), "arc" (elliptical or circular arc), and "closepath" (close the current path by drawing a line to the last "moveto" point). The following example specifies a path in the shape of a triangle. The "M" indicates a "moveto," "L"s indicate "lineto"s, and the "z" indicates a "closepath."

<?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">
<svg xml:space="preserve" width="5.5in" height="2in">
<path d="M 50 10 L 350 10 L 200 120 z"/>
</svg>

Note that x and y coordinates are implicitly defined within the data attribute — that is, "x=" and "y=" are left out in order to conserve character data.

As you can see from the previous example of a path definition, SVG files are written in an extremely abbreviated format (to minimize file size) and may seem intimidating at first. However, as you will see, the structure of the file is very simple, and the Illustrator SVG Format plug-in organizes groups in such a way that it is simple to distinguish the various elements of your drawing.

Next lesson: The bounding box