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
<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-2. The SVG document created by the line-art script
- Figure 5-3. An SVG rectangle, filled in purple
- 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