O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required