The SVG Rendering Model
Understanding the SVG Rendering model is important so that you can create images that display the parts of an SVG image that you want to be visible.
The SVG rendering model is referred to as the Painter's Model, indicating that it resembles the way in which oil paint is applied and seen on a canvas. The first brush stroke is covered up by subsequent brush strokes. Similarly in SVG an element that occurs early in the document—which overlaps with an element that occurs later in the document—will be covered over by the later element to a degree, depending on the later element's opacity. If the later element is fully opaque, it completely covers the part of the earlier element that it overlaps. If, however, the later element is partly transparent, the color and shape of the earlier element might be seen through the later element.
Listing 23.7 illustrates this in practice. The onscreen appearance is shown in Figure 23.5.
Listing 23.7. The Effect of the SVG Painter's Model (PaintersModel.svg)
Figure 23.5. The effect of the SVG Painter's Model when opaque and semi-transparent paint is applied later in an SVG document.
The red (middle) rectangle, where it overlaps the black (top left) rectangle, completely conceals that part of the black rectangle. It has painted over the black rectangle with completely opaque red paint. However, the yellow (bottom right) rectangle is partly transparent. Therefore, where it overlaps the red rectangle, part of the red rectangle shows through, yielding an orange color.