3.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 shall
match that described by this model.

The appendix 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
might 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.)

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

3.3 Rendering Order

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

3.4 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 ancestor's canvas using the standard rendering rules
for individual graphic objects.

3.5 Types of graphics elements

SVG supports three fundamental types of graphics elements
that can be rendered onto the canvas:

Raster images, which represent an array of values that specify the
paint color and opacity (often termed alpha) at a series of points
on a rectangular grid. (SVG requires support for specified raster image
formats under conformance requirements.)

3.5.1 Painting shapes and text

Shapes and text can be filled
(i.e., apply paint to the interior of the shape) and stroked
(i.e., apply paint along the outline of the shape).
A stroke operation is centered on the outline of the object; thus,
in effect, half of the paint falls on the interior of the shape and
half of the paint falls outside of the shape.

For certain types of shapes, marker symbols
(which themselves can consist of any combination of shapes, text and
images) can be drawn at selected vertices.
Each marker symbol is painted as if its graphical content were expanded
into the SVG document tree just after the shape object which is using
the given marker symbol.
The graphical contents of a marker symbol are rendered using the same
methods are graphics elements.
Marker symbols are not applicable to text.

The fill is painted first, then the stroke, and then the marker symbols.
The marker symbols are rendered in order along the outline of the shape,
from the start of the shape to the end of the shape.

Each fill and stroke operation has its own opacity settings; thus,
you can fill and/or stroke a shape with a semi-transparently drawn
solid color, with different opacity values for the fill and stroke operations.

The fill and stroke operations are entirely independent painting
operations; thus, if you both fill and stroke a shape, half of the
stroke will be painted on top of part of the fill.

SVG supports the following built-in types of paint which can be used
in fill and stroke operations:

3.5.2 Painting raster images

When a raster 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.

3.6 Filtering painted regions

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.

3.7 Clipping, masking and object opacity

Clipping uses a path to define a region of the output device to which
paint can 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.
A clipping path can be thought of as a mask wherein those pixels outside the clipping
path are black with an alpha value of zero and
those pixels inside the clipping path are white with an alpha value of 1.
"Within"
is defined by the same rules used to determine the interior of a path for painting.
The clipping path is typically anti-aliased on low-resolution devices
(see 'shape-rendering').
Clipping is described in Clipping paths.

Masking uses the luminance of the color channels and alpha channel in a referenced
SVG element to define a supplemental set of alpha values which
are multiplied to the alpha values already present in the graphics to which the mask is applied.
Masking is described in Masking.

A supplemental masking operation may also be specified by applying
a "global" opacity to a set of rendering operations.
In this case the mask is infinite, with a color of white and an alpha channel of the given
opacity value. (See 'opacity' property.)

In all cases the SVG implementation must behave as though all painting
and filtering is first performed to an
intermediate (imaginary) canvas. Then, alpha values on the intermediate canvas
are multiplied by the implicit alpha values from the clipping path, the alpha values
from the mask, and the alpha values from the
'opacity' property.
The resulting canvas is composited into the background using
simple alpha blending.
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.

3.8 Parent Compositing

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