Mastering SVG

More on fills and strokes

You've seen them in use in most of the examples, now let's take a little bit of a more complete look at fills and strokes. These presentation attributes are important to SVG, especially when working with them dynamically, as it's much easier to manipulate elements directly as compared to writing dynamic CSS.

fill and stroke are collectively referred to as paint properties. fill sets the inside color of the object and stroke sets the color of the line drawn around the object. As you've already seen, they can accept any valid CSS color value. They can also accept a reference to a paint server element (these are hatch, linearGradient, meshgradient, pattern, radialGradient, and solidcolor), which are elements that define ...