Using SVG with CSS3 and HTML5

Chapter 5. Building Blocks

Chapter 5. 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.

However, predefined shapes are limited. For most drawings, you will need to create custom shapes, using <polygon>, <polyline>, or <path>. A <path> can be used to replace any of the other shape elements, but is considerably more flexible. SVG paths can be used to draw incredibly complex shapes that are not included in any geometry textbook.

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 ...