SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)

by Jeff Schiller, 2005-07-05

Table of Contents

5. Basic Shapes And Colours Are Boring!

I promised to get you passed 2nd grade geometry in this tutorial and here's where I follow through with that promise. The butterfly example from earlier in this tutorial clearly shows that basic shapes painted with flat colours will simply not do for tomorrow's exciting new internet experience.

While the basic shapes can be cobbled together as I did for the butterfly, to give realistic effects or create arbitrary drawings something more complex is needed. That something is the SVG Path entity. A Path is described by a series of commands given to a virtual "pen" that describes how the shape should be drawn. Most commands simply define how the "pen" should be moved from one point to another and if they should be connected by lines or curves. From such a basic definition, we can see that all the basic shapes presented in previous sections can be considered paths (a rectangle is a closed path with 4 points, each connected by line segments, a circle/ellipse is a closed path with two points connected by two elliptical arcs/curves, a line is an open path of 2 points connected by a line segment, etc).

Since a general path element could be arbitrarily complex, containing potentially hundred of points, curves, etc, the designers of the SVG specification decided on a syntax that would help to keep the verbosity of XML syntax to a minimum. Having each path command as a separate XML entity would not have been a good idea, a shorter form of expression was needed. Thus, while the <path> element allows the author to specify how to stroke and fill the path (like other simpler shapes), the actual "pen" commands are specified in the "d" attribute (d for data) as a series of commands separated by whitespace. As a result, unlike other SVG shapes we've discussed so far, in general the <path> element cannot be easily read in the SVG source by humans to determine what is going on.

<path d="...list of path commands go here..." stroke="blue" fill="green" />

Each path command type is summarized below. For each command there is a relative or absolute version. If the uppercase letter is used then the points given are in absolute coordinates with respect to the enclosing viewport. If the lowercase letter is used then the points given are in relative coordinates with respect to the current "pen" position:

Now you be wondering why I skipped from simple shapes from the Second Grade to cubic/quadratic Bezier curves with control points, and you're trying to figure out just what the heck that means. Here's some advice: Don't worry about it. Paths are clearly not meant to be constructed by hand, they are meant to be designed by higher-level tools (i.e. not a text editor), which leads us nicely into our last topic for this tutorial.

<<<Prev: 4. Colour Me Stupid Next: 6. Don't Be A Tool, Use A Tool>>>

codedread codedread