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 gamut of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves may be approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).
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 compositing.
SVG defines a rendering tree. Elements in the rendering tree have an implicit drawing order. Elements are rendered using a pre-order, depth-first walk of the SVG document fragment. Subsequent elements are painted on top of previously painted elements.
SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:
Shapes, which represent some combination of straight lines and curves.
Text, which represents some combination of character glyphs.
Replaced content:
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.)
Video, which represents a timed sequence of raster images.
Animation, which represents a timed vector animation.
Foreign objects, which represent rendering of non-SVG content.
Shapes and text can be filled (i.e., paint can be applied to the interior of the shape) and stroked (i.e., painted applied 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.
The fill is painted first, then the stroke.
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 rendering 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 Tiny supports the following built-in types of paint which can be used in fill and stroke operations:
Gradients (linear and radial)
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.
As a video stream is a timed sequence of raster images, rendering video has some similarity to rendering raster images. However, given the processing required to decode a video stream, not all implementations may be able to transform the video output into SVG's userspace. Instead they may be limited to rendering in device space. More information can be found in the definition for video.
Each fill or stroke painting operation must behave as though the operation were first performed to an intermediate canvas which is initialized to transparent black onto which either the solid color or gradient paint is applied. Then, the alpha values on the intermediate canvas are multiplied by the 'fill-opacity' or 'stroke-opacity' values. The resulting canvas is composited into the background using simple alpha 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.