5 SVG Rendering Model

5.1 Introduction

(Just getting started here.)

The SVG rendering model is as follows. SVG processors can be implemented differently, but the implementations should achieve the same results as if the model where implemented exactly as described here:

1. Transparent canvas: A canvas is defined in viewport space (??? add link) which is 100% transparent initially. Graphical objects are drawn onto that canvas one after another, altering the color and opacity values on this canvas as they are drawn.
2. Rendering order: At the top level of the SVG document hierarchy, objects (and a <g> [??? add link] is considered a single object here) are rendered bottom-to-top in increasing z-index order (??? add link). Objects with the same parent and same z-index are rendered bottom-to-top according to the location in the document (the first child is drawn first). The same algorithm applies recursively within each <g> element; thus, for the purposes of determining rendering order, each <g> is like its own mini SVG document, with z-index values within a <g> only applying relative to the same parent.
3. Display List: The given object is converted into a SVG primitive object display list (Display List) consisting of a list of path, text and image objects with all coordinates and lengths transformed into viewport space. All images are still in the original resolution (no resampling into viewport resolution yet).
4. Filtering: If a filter is specified on a given object, the Display List is passed to the filter, which returns a modified Display List (which conceivable might result in a rasterized Display List, possibly in viewport resolution).
5. SVG Compositing: The Display List is composited into the canvas based on the current blending parameters.
6. Parent Compositing: The parent of the SVG document takes the computed canvas and blends it into the parent document.

5.2 Rendering Properties

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

visible

The current object should be drawn.

hidden

The current object should not be drawn.

The 'z-index' property specifies the stack level of the current object relative to its other siblings.

Values have the following meanings:

auto

???

<integer>

???