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 a paint style for the element. You've already seen one of these (linearGradient) and will learn about the more commonly supported ones shortly. Before you do, however, it's time to take a look at some stroke-specific attributes that control the way the...