WDVL: SVG Graphics Elements

In this month's article, we will concentrate only on some of the so-called Graphics Elements of SVG. In subsequent articles, we'll examine more sophisticated SVG features including opacity, transforms, animation, and linking.

The Terminology section of the SVG Working Draft defines terms such as Graphics Elements, Shapes, Basic Shapes, and Graphics Referencing Elements. For convenience, we illustrate the relationship of these overlapping terms using the nested list below (subject to change as the Working Draft becomes a Recommendation).

In the examples that appear in this article, we'll be using most of these Graphics Elements. The table that follows provides the essential attributes for the 6 Basic Shapes plus elements svg, text, and image. It is based primarily on the SVG spec shapes.html page and the SVG DTD.

Element	Basic Attributes	Notes
`svg`	x, y, width, height, allowZoomAndPan	This element is the outermost container that encloses all Graphics Elements and defines the SVG image. The location (x,y) will be useful when SVG can be displayed within Web pages. The attribute `allowZoomAndPan` is a boolean (default=true) that gives the author control over zooming and panning.
`rect`	x, y, width, height	Also optional rx, ry - For rounded rectangles, the x/y-axis radius of the ellipse used to round off the corners of the rectangle.
`circle`	cx, cy, r	Center (x,y) and radius
`ellipse`	cx, cy, rx, ry	Center (x,y) and x/y-axis radius of the ellipse
`line`	x1, y1, x2, y2	Start and endpoints
`polyline`	Points list	"x-y-coordinate-pairs" The points that make up the polyline. Space- or comma-separated. Example: "20,20 50,100 200,80 70,300" NOTE: "Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within a points value."
`polygon`	Points list A polygon is exactly the same as a polyline, except that the figure is automatically closed.	"x-y-coordinate-pairs" The points that make up the polygon. Space- or comma-separated
`text`	String, x, y	This refers to a string that is displayed, as opposed to the elements `desc` or `title` which have special meanings and may or may not be displayed by a viewer.
`image`	x, y, width, height, xlink:href	This allows you to embed a PNG or JPEG (but not a GIF) image within an SVG image. Note that you use the `xlink:href` attribute rather than the HTML `img src` attribute to point to the image file. Also note that you can specify the precise location of the embedded image within the SVG image.

Please understand that the above table is a major simplification of the long attribute lists that SVG actually defines for each of the Graphics Elements. To underscore this point, consider the excerpt below from the SVG DTD (version http://www.w3.org/Graphics/SVG/SVG-19990812.dtd) for the rect element. This fragment indicates that Graphics Elements can contain descriptions and titles, and can be animated. In addition to the essential attributes listed in our table above, the DTD states that XLink is supported (id), as is CSS (class, style). Transformations of the object may be specified. The entity %graphicsElementEvents; refers to a list of roughly 12 kinds of scriptable events to which a Graphics Element may respond, such as onclick, onmouseover, onkeydown, and onload.