This chapter is from the book
This chapter is from the book
This chapter is from the book
Workshop
The Workshop is designed to help you anticipate possible questions, review what you've learned, and begin learning how to put your knowledge into practice.
Quiz
What element is used to create a box shape?
What two attributes does the circle element need to define its center point?
True or False: The polyline element automatically completes its paths?
What does the M path command stand for?
How do path commands differentiate between absolute and relative coordinates?
Answers
The rect element is used to describe any rectangular shape, including squares.
The cx and cy attributes are used to define the center point of a circle.
False. The polygon element automatically closes its path, while the polyline element does not.
The M path command is short for moveto, the command that signifies the start of a line.
Uppercase path commands are used to describe absolute coordinates, whereas their lowercase alternatives are used for relative coordinates.
Exercises
Having learned how to draw circles and ellipses, try creating a puffy cloud. By clustering a series of these shapes together, you can create an object that looks like a silhouette of a cloud. In the next hour, you'll learn how to fill that silhouette with white (or any other color). (If you find your illustration looking like a blob, you can sneak a peek at Listing 8.1 in Hour 8.)
If you own Adobe Illustrator or Jasc WebDraw, try creating some simple illustrations and then export/save the files in SVG format. Open the SVG export in a text editor and observe how those programs deal with the drawing of objects. For instance, Illustrator converts all shapes (whether rectangles, circles, or freeform paths) into path data, as opposed to WebDraw, which exports some basic shapes as their SVG element counterparts.
Refer to Hour 24 for a reproducible grid. Make several copies of this grid and begin plotting paths and their arc handles. By visualizing your data before coding, you can reduce the anxiety of not knowing what coordinates and path commands are necessary to execute your illustration.
Play with the code in Listing 5.10, changing the absolute path command C to the relative path command c. Save your file, load it within your browser, and observe the bizarre effects. Understanding the radical difference between the two coordinate systems will help you troubleshoot issues you may encounter with paths later.