SVG Colors, Patterns & Gradients

Chapter 2. The Painter’s Model

If I asked you to draw a yellow circle with a blue outline, would it look the same as if I asked you to draw a blue circle and fill it in with yellow?

If I asked you to draw a red pentagon and a green square centered on the same spot on a page, would most of the image be red or green?

There are no hard-and-fast rules when you’re drawing things by hand. If someone gives you ambiguous instructions, you can always ask for clarification. But when you’re giving instructions to a computer, it only has one way to follow them. So you need to make sure you’re saying exactly what you mean.

Even if you use SVG a lot (and we’re going to assume you use it at least a little), you probably haven’t given much thought to how the computer converts your SVG code into colored patterns on the screen. If you’re going to really make the most of those colored patterns, however, you need to know how your instructions will be interpreted.

This chapter discusses the basics of the SVG rendering model, the process by which the computer generates a drawing from SVG markup and styles. It reviews the basic fill and stroke properties that define how you want shapes or text to be painted. The entire rest of the book can really be summed up as different ways you can specify fill or stroke values.

The SVG rendering model is known as a painter’s model. Like layers of paint on a wall, content on top obscures content below. The SVG specifications define which content gets put on top of ...