5 SVG Rendering Model

5.1 Introduction

Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter. A real implementation is not required to implement the model in this way, but the result on any device supported by the implementation should match that described by this model.

The chapter on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation will deviate slightly because of limitations of the output device (e.g. only a limited range of colors may be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements.)

5.1.1 The painters model

SVG uses a "painters model" of rendering. "Paint" is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. This model is more sophisticated than older models in that the paint may be only partially opaque. When the paint is not completely opaque the result on the output device is defined by the (mathematical) rules for compositing described under Simple Alpha Blending.

5.1.2 Rendering Order

Elements in an SVG document have an implicit drawing order, with the first elements in the SVG document getting "painted" first. Subsequent elements are painted on top of previously painted elements.

5.1.3 Grouping

Grouping elements such as the <g> have the effect of producing a temporary separate canvas onto which child elements are painted. Upon the completion of the group, the effect is as if the group's canvas is painted onto the ancestors canvas using the standard rendering rules for individual graphic objects.

5.1.4 Specifying paint

Paint is specified as a color and an opacity. Color is normally specified using the RGB values traditionally used in computer systems. This is defined in Color. Opacity is simply a measure of the amount of the underlying color that the new paint obscures - a percentage or fractional value.

Paint may also be specified as a combined color and opacity value by specifying an external bitmap image. This is discussed in more detail below.

5.1.5 Specifying the painted region

Paint, when specified as color and opacity, is associated with a painting operation that fills a particular region or draws a line along a particular path. SVG specifies in Paths a syntax for defining such a path as well as rules which determine what parts of an output device are within the path and what parts are outside. These latter rules allow a painted region to be determined from a path.

[The rendering model also needs a precise definition of how line width and joins are interpreted]

5.1.6 Use of external bitmap images

An image specifies both paint and the region that it fills by giving an array of values that specify the paint color and opacity (often termed alpha) at a series of points normally on a rectangular grid.

SVG requires support for specified bitmap formats under conformance requirements.

When an image is rendered the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.

5.1.7 Restricting painted regions

SVG allows any painting operation to be limited to a sub-region of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.

Clipping uses a path to define a region of the output device to which paint may be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. "Within" is defined by the same rules used to determine the interior of a path for painting.

Masking uses the alpha channel or color information in a referenced SVG element to restrict the painting operation. In this case the opacity information within the alpha channel is used to define the region to which paint may be applied - any region of the output device that, after resampling the alpha channel appropriately, has a zero opacity must not be affected by the paint operation. All other regions composite the paint from the paint operation onto the the output device using the algorithms described in Clipping, Masking and Compositing.

Masking may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask defines an infinite alpha channel with a single opacity. (See 'opacity' property.) Additionally, opacity can be set for fill and stroke operations. (See 'fill-opacity' property and 'stroke-opacity' property.

In all cases the SVG implementation must behave as though all qualified painting is done first to an intermediate (imaginary) canvas then filtered through the clip area or mask. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.

5.1.8 Filtering painted regions

SVG also allows any painting operation to be filtered. (See Filter Effects)

In this case the result must be as though the paint operations had been applied to an intermediate canvas, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.

5.1.9 Parent Compositing

SVG documents can be semi-opaque. In many environments (e.g., web browsers), the SVG document has a final compositing step where the document as a whole is blended translucently into the background canvas.

5.2 Rendering Properties

Value:   visible | hidden | inherit
Initial:   visible
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

'visibility' indicates whether a given object should be drawn.

The current object should be drawn.
The current object should not be drawn.