Designing SVG Web Graphics

Painter’s Model

One of the important concepts about SVG that determines what you and your customers see onscreen is the rendering order for elements within an SVG image. The SVG term for this concept is the painter’s model, in which the final rendering of an SVG image broadly resembles the way in which an oil painting is created. Just as when you apply oil paint to a canvas and cover up what is below it, you can obliterate (sometimes intentionally, sometimes not) other SVG elements rendered further back.

Typically, an element contained early in an SVG document is rendered toward the back and therefore is covered by paint applied as defined by later elements in the document.

Listing 2.8 illustrates how the painter’s model works. The first <rect> ...