SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)
Table of Contents
- SVG KICKSTART TUTORIAL #1
- SVG KICKSTART TUTORIAL #2
- 1. Introduction
- 2. Serving Up A Slice of SVG Pie
- 3. The Shape Of Things And Other Stuff
- 4. Colour Me Stupid
- 5. Basic Shapes And Colours Are Boring!
- 6. Don't Be A Tool, Use A Tool
- 7. Conclusion
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:
- MoveTo (M/m): Tells the renderer to "lift" the pen and move to the specific point, starting a new subpath. The specific point becomes the current pen position and the first point in the subpath.
- Close Path (Z/z): Closes the current subpath by drawing with the pen from the current pen position to the first point specified in the subpath (via the Move command).
- LineTo (L/l): Draws a line from the current pen position to the new pen position
- Cubic Bezier (C/c and S/s): Draws a cubic bezier from the current pen position to the new pen position using specific coordinate(s) as control points. See this section for full details.
- Quadratic Bezier (Q/q and T/t): Draws a quadratic bezier from the current pen position to a new pen position using specific coordinate(s) as control points. See this section for full details.
- Elliptical Arc (A/a): Draws an elliptical arc from the current pen position to the new pen position using the specified x- and y-radii, and other parameters that specify the arc properties. See this section for more details.
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>>>