SVG Colors, Patterns & Gradients

Chapter 13. Painting Lines

The gradient and pattern examples so far have nearly all used the fill property to apply that paint to a shape. However, we mentioned early on in the book that paint servers can also be used for the stroke property.

Applying paint servers to strokes introduces new complexities, which is why we have separated the topic into its own chapter. We cover the difficulties here, but also give some examples of unique effects you can create with painted strokes. And we include teasers about some new features proposed for SVG 2 that will make this easier.

Beyond the Edges

Strokes, as we’ve briefly mentioned, do not have to use solid colors. The stroke property, like the fill property, can use a url() function to reference a paint server—a gradient or pattern—by its id value. You can also include a fallback color in case there is a problem with that paint server, and—as you’ll soon see—those fallback colors do get used.

It is when using paint servers that you are most strongly reminded that the stroke is really a secondary shape, built upon the element that defines it, and not a line drawn with a pen or brush. Patterns and gradients currently cannot be painted along the path; similar to when painting the fill of a shape, the stroke is cut out of wallpaper-like paint server content.

There are two main areas where designers tend to get frustrated when using paint servers for strokes:

• The objectBoundingBox units used by paint servers do not include the stroke region. ...