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 12
Filling Up to Full: The fill Property, Gradients, and Patterns

In this chapter, we examine more thoroughly the options you have for filling your graphics with colors and patterns.

The fill style on shape or text determines how the region inside that shape is colored. We’ve been using fill in examples throughout the book, usually setting its value to a simple color. But SVG shapes and text can also be filled with gradients or patterns. These more complex painting instructions are defined with their own elements and attributes, and then another element uses them with a cross-reference from its fill value.

This chapter briefly reviews your options for declaring colors in SVG—but assumes that you’re already familiar with the same options in CSS. It then introduces SVG gradients and patterns. These paint server elements are incredibly flexible, and this book isn’t going to describe every possible combination. However, by the end of this chapter, you should be able to create simple patterns or gradients, and to understand and adapt the markup created for you by graphics software.

If you want more details, we have written an entire book on SVG paint servers, SVG Colors, Patterns & Gradients (O’Reilly, 2015), that does explore all the options.

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 12-1. Named color keywords recognized in SVG and CSS
Figure 12-2. A warning sign with a color-coordinated icon
Example 12-1. Using currentColor in reused SVG symbols
Figure 12-3. A warning sign with color coordination and contrast control
Figure 12-4. Shapes with and without reduced fill-opacity (right versus left column), and with and without reduced-alpha fill colors (bottom versus top row)
Example 12-2. Creating semitransparent fill in different ways
Figure 12-5. Linear gradients (top), radial gradients (middle), and patterns (bottom)
Unlabelled figures in the “Serving Up New Paint” future focus section
Figure 12-6. “Painting” a shape in SVG, by cutting it out from a patterned sheet
Figure 12-7. Assorted SVG shapes (filled), some transformed, and their bounding boxes (outlines)
Figure 12-8. A rounded square filled with a diagonal linear gradient, and the same square with the gradient’s line vector and stop offsets marked on it
Example 12-3. Drawing a simple linear gradient (incorrectly titled “Filling shapes with a gradient sized to the object bounding box” in initial printings of the book)
Figure 12-9. A rounded rectangle filled with a diagonal linear gradient, with the line vector and stop offsets marked on it
Figure 12-10. A repeating linear gradient in a circle, and the same shape with the gradient’s line vector and stop offsets marked on it
Example 12-4. Drawing a repeating linear gradient (incorrectly titled “Filling shapes with a gradient sized to the object bounding box” in initial printings of the book)
Figure 12-10. A reflecting linear gradient in a circle, and the same shape with the gradient’s line vector and stop offsets marked on it
Figure 12-12. Two different shapes, in two different drawings, using the same linear gradient
Figure 12-13. A repeating radial gradient with sharp stops, and the same shape with sample rays and the stop offsets marked on it
Example 12-5. Controlling the size of a radial gradient to generate repeated rings
Example 12-6. Repeating gradient stops to generate rings, without using spreadMethod
Figure 12-14. Stoplight with gradient fills

See Figure 1-4 in Chapter 1.

Figure 12-15. A reflecting, off-center radial gradient, and the same shape with the stop offsets and sample rays marked on it
Example 12-7. Generating asymmetrical patterns with fx and fy in a reflected radial gradient
Unlabelled figure in the “CSS Gradients” CSS versus SVG sidebar
Figure 12-16. Checkerboards drawn with a scalable pattern
Example 12-8. Drawing a checkerboard with a pattern
Figure 12-17. An SVG shape filled with a photograph
Example 12-9. Using a <pattern> to create a photographic fill
Figure 12-18. A pattern made from a card-suit symbol, used to fill a different suit’s symbol
Example 12-10. Defining a classic, fixed-size <pattern> using predefined symbols
Figure 12-19. Square pattern tiles, rotated 45°
Figure 12-20. Square pattern tiles, rotated 45°, containing icons rotated in the opposite direction
Figure 12-X1. Assorted SVG shapes filled with a radial gradient
Example 12-X1. Filling shapes with a gradient sized to the object bounding box
Figure 12-X2. Assorted SVG shapes filled with an asymmetrical objectBoundingBox radial gradient
Figure 12-X3. Assorted SVG shapes filled with a userSpaceOnUse radial gradient
Figure 12-X4. Assorted SVG shapes filled with a controlled-aspect-ratio pattern, containing a radial gradient
Figure 12-X5. The (official) bounding box of text elements, showing the individual glyph boxes
Figure 12-X6. The bounding box of text elements, as calculated by EdgeHTML 16 (left) versus Firefox 58 (right)
Figure 12-X7. Text elements and <tspan> elements filled with linear gradients
Example 12-X2. Filling text with object bounding-box gradients
Figure 12-X8. Repeating (left) and reflecting (right) linear gradients, which are actually both patterns
Example 12-X3. Using a <pattern> to synthesize repeating and reflecting linear gradients

Online Extras#