Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 5
Building Blocks: Basic Shapes

Most SVG graphics are built from one or more shape elements. Shapes—along with text and embedded images—provide the basic graphical content that is drawn to the screen. The attributes of each shape element define the geometrical region of that shape; its style properties control how that vector region is displayed on the screen (or printed on paper).

SVG defines two different ways of creating a shape. The first is to make use of the predefined shape primitives. In Chapter 1, we introduced two of these: circles and rectangles. The others are <line> and <ellipse>. These are “quick and dirty” shapes that are useful for fast layout, common operations, and fairly standard interface and graphic design layouts. They can also make your code easier to read, as the element tag names clearly define what shape it is.

This chapter introduces the basic shapes in detail, discussing how you can specify lengths and positions in SVG. With this information, you will be able to lay out many simple geometric designs.

Chapter 6 then explores <path> and the other custom shape elements, and the variety of shapes they can create. At the end, you’ll have all the information you need to create basic vector icons and line drawings with SVG. In theory, anyway—it takes a lot of practice to really get comfortable with manipulating curved paths!

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 5-1. An SVG line, stroked in blue
Figure 5-2. String art “curves” created from SVG lines
Example 5-1. Drawing SVG lines with JavaScript
Example 5-2. The SVG document created by the line-art script
Figure 5-3. An SVG rectangle, filled in purple
Figure 5-4. A checkerboard of SVG rectangles created with JavaScript
Example 5-3. Creating a checkerboard of SVG rectangles with JavaScript
Figure 5-5. An SVG rectangle with rounded corners, positioned atop a regular <rect> and a line
Figure 5-6. A ripple pattern created with rounded rectangles
Example 5-4. Using radiused corners to round rectangles
Unlabelled figure in the “Curved Corners” CSS versus SVG sidebar
Figure 5-7. A funny-looking face making a funny face
Example 5-5. Positioning and sizing circles and ellipses in a drawing
Unlabelled figure in the “Shapes in Stylesheets” CSS versus SVG sidebar
Figure 5-X1. A Pythagorean triple, drawn as even-length beads arranged in a right-angled triangle
Figure 5-X2. SVG circles and ellipses sized using percentages, at different aspect ratios
Example 5-X1. Sizing circles and ellipses using percentages, in a resizeable SVG

Online Extras#