Using SVG with CSS3 and HTML5

Chapter 12. Filling Up to Full

Chapter 12. The fill Property, Gradients, and Patterns

Parts II and III focused on the geometry of vector graphics: laying down the lines, curves, and shapes of the design. Such work is necessary; even the most skilled of painters usually work out their rough concepts as drawings first, applying paint only after they’ve finalized in their mind what they are painting. And as with paintings created with a brush and pigments, an SVG graphic is not truly “complete” until after color has been applied to transform the visual outline into a completed work.

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