Rendering Model

Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter.

The appendix on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation may 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).

2.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 onto some area of the output device, possibly obscuring paint that has previously been layed down. After each object or group is painted, it becomes part of the background for the next painting operation. SVG 2 supports advanced blending modes and compositing operations that control how each painting operation interacts with the background. The rules governing these painting operations are outlined in the Compositing and Blending Specification.

2.3. Rendering order

Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted.

Along the z axis, elements are grouped into 'stacking contexts', each stacking context has an associated stack level. A stack level may contain one or more child nodes - either child stack levels, graphics elements, or ‘g’ elements. graphics elements and ‘g’ elements within single stack level are painted in document order - that is, they are painted in the order that they are defined in the document.

Each stack level is assigned an integer value that defines it's position on the z axis relative to other stack levels within the same stacking context. Lower values are painted first, and so elements in a stack level with a higher value will paint over one with a lower value.

By default, everything is placed in stack level zero.

2.3.1. Controlling element rendering order: the ‘z-index’ property

The rules governing behavior for SVG elements with the ‘z-index’ property specified are outlined below:

CSS specifies a property named ‘z-index’. The CSS rules that define the effect of the ‘z-index’ property were written specifically for the CSS box model, and those rules do not make sense as they stand for most SVG elements (most SVG elements do not participate in or establish a CSS box model layout). This section specifies how implementations must handle the ‘z-index’ property on elements in the SVG namespace.

Contrary to the rules in CSS 2.1, the ‘z-index’ property applies to all SVG elements regardless of the value of the ‘position’ property, with one exception: as for boxes in CSS 2.1, outer ‘svg’ elements must be positioned for ‘z-index’ to apply to them.

Here is a simple example:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="100" height="100" fill="red"    z-index="-1"/>
  <rect x="40" width="100" height="100" fill="lime"/>
  <rect x="80" width="100" height="100" fill="blue"   z-index="1"/>
  <rect x="60" width="100" height="100" fill="aqua"/>
  <rect x="20" width="100" height="100" fill="yellow" z-index="-1"/>
</svg>

In this example there are three stack levels: -1, 0 (the default) and 1. The red and yellow rects are in stack level -1, the lime and aqua rects are in stack level 0 (the default), and the blue rect is in stack level 1. Going from lowest stack level to highest, and painting the elements in each stack level in document order, the painting order is: red, yellow, lime, aqua, blue.

A new stacking context must be established at an SVG element for its descendants if:

Stacking contexts and stack levels are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, and for determining which element is highest when determining the target of a pointer event. Stacking contexts and stack levels do not affect the position of elements in the DOM tree, and their presence or absence does not affect an element's position, size or orientation in the canvas' X-Y plane - only the order in which it is painted.

Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; elements in ancestor stacking contexts may not come between any of its elements.

Each element belongs to one stacking context. Each element in a given stacking context has an integer stack level. Elements with a higher stack level must be placed in front of elements with lower stack levels in the same stacking context. Elements may have negative stack levels. Elements with the same stack level in a stacking context must be stacked according to document order.

With the exception of the ‘foreignObject’ element, the back to front stacking order for a stacking context created by an SVG element is:

Since the ‘foreignObject’ element creates a "fixed position containing block" in CSS terms, the normative rules for the stacking order of the stacking context created by ‘foreignObject’ elements are the rules in Appendix E of CSS 2.1.

In the following example, the ‘z-index’ property on the ‘g’ element is set to zero. This creates a new stacking context to contain the ‘g’ element's children without moving the ‘g’ to a different level in the document's root stacking context:

<svg xmlns="http://www.w3.org/2000/svg">
  <g z-index="0">
    <!-- this is a self contained graphic -->
    <rect x="40" width="100" height="100" fill="lime" z-index="1"/>
    <rect x="20" width="100" height="100" fill="yellow"/>
  </g>
  <rect x="60" width="100" height="100" fill="aqua"/>
  <rect x="0" width="100" height="100" fill="red" z-index="-1"/>
</svg>

The example's root stacking context contains two stack levels: -1 and 0. The red ‘rect’ is in level -1, and the ‘g’ element and aqua ‘rect’ are in level 0. Inside stack level 0, the ‘g’ element's ‘z-index’ property creates a new nested stacking context at the ‘g’ for the ‘g’ element's children. In this child stacking context there are two stack levels: 0 and 1. The yellow ‘rect’ is in level 0 (the default), and the lime ‘rect’ is in level 1.

Painting of this example starts with the stack levels of the root stacking context. First the red rect is painted in level -1, then in level 0 the ‘g’ element is painted followed by the aqua rect. When the ‘g’ element is painted, the child stacking context that its z-index created and all of that context's stack levels are also painted. In this child stacking context, first the yellow rect in level 0 is painted, followed by the lime rect in level 1. It's only after the ‘g’ and the stacking context that it creates has been painted that the aqua rect is painted. Note that this means that although the z-index of 1 for the lime rect is a higher value than the (implicit) z-index of 0 for the aqua rect, the containment provided by the ‘g’'s child stacking context results in the aqua rect painting over the lime rect. The painting order is therefore: red, yellow, lime, aqua.

2.4. How elements are rendered

2.5. How groups are rendered

Grouping elements, such as the ‘g’ element (see container elements ) create a compositing group. The Compositing and Blending specification normatively describes how to render compositing groups. In SVG, effects may be applied to a group. For example, opacity, Filter Effects or masking. These effects are applied to the rendered result of the group immediately before any transforms on the group are applied, which are applied immediately before the group is blended and composited with the group backdrop. Applying any such effects to a group makes that group isolated.

Thus, rendering a compositing group follows the following steps:
If the group is isolated:

The initial backdrop is set to a new buffer initialised with rgba(0,0,0,0)
The contents of the group that are graphics elements or ‘g’ elements are rendered in order, onto the initial backdrop
Filter Effects and other effects that modify the group canvas are applied
Group transforms are applied
The group canvas is blended and composited with the group backdrop

else (the group is not isolated):

The initial backdrop is set to the group backdrop
The contents of the group that are graphics elements or ‘g’ elements are rendered in order, onto the initial backdrop. The group transforms are applied to each element as they are rendered.

2.5.1. Object and group opacity: the effect of the ‘opacity’ property

See the CSS Color Module Level 3 for the definition of ‘opacity’. [CSS3COLOR]

The ‘opacity’ property specifies how opaque a given graphical element or container element will be when it is painted to the canvas. When applied to a container element, this is known as group opacity, and when applied to an individual rendering element, it is known as object opacity. The principle for these two operations however is the same.

These four opacity properties are involved in intermediate rendering operations. Object and group opacity however can be thought of as a post-processing operation. Conceptually, the object or group to which ‘opacity’ applies is rendered into an RGBA offscreen image. The offscreen image as whole is then blended into the canvas with the specified ‘opacity’ value used uniformly across the offscreen image. Thus, the presence of ‘opacity’ causes the group to be isolated.

The following example illustrates various usage of the ‘opacity’ property on objects and groups.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- Background blue rectangle -->
  <rect x="100" y="100" width="1000" height="150" fill="blue"/>

  <!-- Red circles going from opaque to nearly transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>

  <!-- Opaque group, opaque circles -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Group opacity: .5, opacity circles -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Opaque group, semi-transparent green over red -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
  <!-- Opaque group, semi-transparent red over green -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
  </g>
  <!-- Group opacity .5, semi-transparent green over red -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
</svg>

Image showing different groups of circles blended into the background.

Each group of red and green circles is first rendered to an offscreen image before being blended with the background blue rectangle as a whole, with the given ‘opacity’ values.

In the example, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows:

The first group shows the opaque case for reference. The group has opacity of 1, as do the circles.
The second group shows group opacity when the elements in the group are opaque.
The third and fourth group show that opacity is not commutative. In the third group (which has opacity of 1), a semi-transparent green circle is drawn on top of a semi-transparent red circle, whereas in the fourth group a semi-transparent red circle is drawn on top of a semi-transparent green circle. Note that area where the two circles intersect display different colors. The third group shows more green color in the intersection area, whereas the fourth group shows more red color.
The fifth group shows the multiplicative effect of opacity settings. Both the circles and the group itself have opacity settings of .5. The result is that the portion of the red circle which does not overlap with the green circle (i.e., the top/right of the red circle) will blend into the blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after blending into the blue rectangle, results in a blended color which is 25% red and 75% blue.

2.6. Types of graphics elements

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

2.6.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).

For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at positions along the shape boundary. 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 as graphics elements. Marker symbols are not applicable to text.

The order in which fill, stroke and markers are painted is determined by the ‘paint-order’ property. The default is that 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, any stroke applied to the shape will be painted on top of part of the fill.

SVG supports numerous built-in types of paint which can be used in fill and stroke operations. These are described in Paint Servers.

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

As in HTML [HTML, 10.4.2], all animated images with the same absolute URL and the same image data are expected to be rendered synchronised to the same timeline as a group, with the timeline starting at the time of the least recent addition to the group.

When a user agent is to restart the animation for an img element showing an animated image, all animated images with the same absolute URL and the same image data in that img element's node document are expected to restart their animation from the beginning.

2.7. Filtering painted regions

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

2.8. Clipping and Masking

SVG supports the following clipping/masking features:

clipping paths, which either uses any combination of ‘path’, ‘text’ and basic shapes or basic shapes to serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out
masks, which are container elements which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background.

Both, clipping and masking, are specified in the module CSS Masking [CSS-MASKING].

2.9. Parent Compositing

When the SVG document is a top-level document, the top level SVG element is considered to be the page group and is composited with a backdrop of white with 100% opacity. For all other referencing modes, there is no page group. The SVG document is composited into the parent document with opacity preserved.

2.10. The effect of the ‘overflow’ property

See the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [CSS21] for the definition of ‘overflow’.

A summary of the behavior of the ‘`overflow`’ property in SVG.
element	initial	ua stylesheet	auto	visible	hidden	scroll
document root svg	visible	n/a	visible \| scroll	visible	hidden	scroll
other svg	visible	hidden	visible \| scroll	visible	hidden	scroll
pattern	visible	hidden	visible	visible	hidden	hidden
hatches	visible	hidden	visible	visible	hidden	hidden
marker	visible	hidden	visible	visible	hidden	hidden
symbol	visible	hidden	visible	visible	hidden	hidden
image	visible	hidden	visible	visible	hidden	hidden
iframe	visible	n/a	visible	visible	hidden	hidden
foreignObject	visible	n/a	visble	visible	hidden	hidden

The ‘overflow’ property has the same parameter values and has the same meaning as defined in CSS 2.1 ([CSS21], section 11.1.1); however, the following additional points apply:

If the ‘overflow’ property has a value of 'visible', the property has no effect (i.e., a clipping rectangle is not created).
For those elements to which the ‘overflow’ property can apply. If the ‘overflow’ property has the value hidden or scroll, a clip, the exact size of the viewport is applied.
When scroll is specified on an ‘svg’ element and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for the viewport whether or not any of its content is clipped.
Within SVG content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. For elements where the value of scroll results in a scrolling mechanism being used by the user agent, then a value of auto may be treated as scroll. If the user agent has no scrolling mechanism, the content would not be clipped, or the value 'scroll' is treated as hidden, then the value auto must be treated as visible

Although the initial value for ‘overflow’ is auto. In the UA style sheet, overflow is overriden for the ‘svg’ element when it is not the root element of a stand-alone document, the ‘pattern’ element, ‘hatch’ element, and the ‘marker’ element to be hidden by default.

Chapter 2: Rendering Model

Contents

2.1. Introduction