The SVG 2 rendering model will follow the rules defined by theCompositing and Blending specification.

Resolution:Seattle/Paris 2012 F2F day 3.

Owner: Nikos (Action 3332).

Status: Done.

3.2. The rendering tree

The components of the final rendered representation of an SVG document do not have a one-to-one relationship with the underlying elements in the document model. The appearance of the graphic instead reflects a parallel structure, the rendering tree, in which some elements are excluded and others are repeated.

Many elements in the SVG namespace do not directly represent a component of the graphical document. Instead, they define graphical effects, metadata, content to be used to represent other elements, or alternatives to be displayed under certain conditions. In dynamic documents, certain components of the graphic may be rendered or not, depending on interaction or animation. These non-rendered elements are not directly included in therendering tree.

Because SVG supports the reuse of graphical sub-components, some elements are rendered multiple times. The individual renderings may have context-dependent styling and may be rasterized at different scales or transformations.

3.2.1. Definitions

rendering tree

The rendering tree is the set of elements being rendered in anSVG document fragment. It is generated from the document tree by excludingnon-rendered elements and inserting additional fragments forre-used graphics. Graphics are painted and composited in rendering-tree order, subject to re-ordering based on thepaint-order property. Note that elements that have no visual paint may still be in the rendering tree.

rendered element

An element that has a direct representation in therendering tree for the current document. Includes a renderedinstance of an element in ause-element shadow tree. Does not include elements that affect rendering as the source definition of re-used graphics but are not directly rendered themselves. SeeRendered versus non-rendered elements

non-rendered element

An element that does not have a direct representation in therendering tree for the current document. It may nonetheless affect the rendering tree as re-used graphics or graphical effects. SeeRendered versus non-rendered elements.

re-used graphics

Graphical components that are included in the rendering tree but do not have a single direct equivalent element in the document model. They may be represented through shadow DOM elements (as in graphics re-used with a‘use’ element), or as image fragments generated as part of a graphical effect (as in patterns or masks).

never-rendered element

Any element type that isnever directly rendered, regardless of context ordisplay style value. It includes the following elements:‘clipPath’,‘defs’,‘desc’,‘linearGradient’,‘marker’,‘mask’,‘metadata’,‘pattern’,‘radialGradient’,‘script’,‘style’ and‘title’; it also includes a‘symbol’ element that is not theinstance root of ause-element shadow tree.

renderable element

Any element type thatcan have a direct representation in therendering tree, as a graphic, container, text, audio, or animation. It includes the following elements:‘a’,‘audio’,‘canvas’,‘circle’,‘ellipse’,‘foreignObject’,‘g’,‘iframe’,‘image’,‘line’,‘path’,‘polygon’,‘polyline’,‘rect’,‘svg’,‘switch’,‘text’,‘textPath’,‘tspan’,‘unknown’,‘use’ and‘video’; it also includes a‘symbol’ element thatis theinstance root of ause-element shadow tree.

A renderable element may or may not be rendered in a given document or point in time.

3.2.2. Rendered versus non-rendered elements

At any given time, every SVG element (orelement instance in ause-element shadow tree) is either rendered or non-rendered. Whether an element is currently rendered or not affects not only its visual display but also interactivity and geometric calculations.

An element isnot rendered in any of these four situations:

• never-rendered element types
• elements excluded because ofconditional processing attributes or‘switch’ structures
• elements with a computed style value ofnone for thedisplay property
• descendent elements of other non-rendered elements

Non-rendered elements:

• have no visual effect on the graphic, except when they are used in the rendering of another element that references them.
• do not contribute to the net geometry ofclipping paths ormasks when they are descendants of a‘clipPath’ or‘mask’
• are not sensitive topointer events
• cannot receivefocus
• do not contribute tobounding box calculations
• are not considered when performingtext layout

Non-rendered elements are not represented in the document accessibility tree. Nonetheless, they remain part of the document model, and participate instyle inheritance and cascade.

3.2.3. Controlling visibility: the effect of the ‘display’ and ‘visibility’properties

SVG uses two properties to toggle the visible display of elements that are normally rendered:display andvisibility. Although they have a similar visible effect in static documents, they are conceptually distinct.

See the CSS 2.1 specification for the definitionsofdisplay andvisibility.[CSS2]

Settingdisplay tonone results in the element not being rendered. When applied tographics elements,text content elements, andcontainer elements that are normally rendered, settingdisplay tonone results in the element (and all its descendents) not becoming part of therendering tree. Note thatdisplay is not an inherited property.

Elements that have any otherdisplay value thannone are rendered as normal.

Thedisplay property only applies torenderable elements. Settingdisplay: none on an element that isnever directly rendered ornot rendered based on conditional processing has no effect.

Thedisplay property affects the direct processing of a given element, but it does not prevent it from being referenced by other elements. For example, settingdisplay: none on a‘path’ element will prevent that element from getting rendered directly onto the canvas, but the‘path’ element can still be referenced by a‘textPath’ element and its geometry will be used in text-on-a-path processing.

When applied to agraphics element or‘use’ element, settingvisibility tohidden orcollapse results in the element not being painted. It is, however, still part of therendering tree. It may be sensitive to pointer events (depending on the value ofpointer-events), may receive focus (depending on the value of‘tabindex’), contributes to bounding box calculations and clipping paths, and does affect text layout.

Thevisibility property only directly affects the rendering ofgraphics elements,text content elements, and the‘a’ element when it is a child oftext content element. Sincevisibility is an inherited property, however, although it has no effect on a‘use’ element orcontainer element itself, its inherited value can affect descendant elements.

3.2.4. Re-used graphics

Graphical content defined in one part of the document (or in another document) may be used to render other elements. There are two types of re-used graphics from a rendering perspective:

• shadow DOM elements, such as those generated by‘use’ elements or by cross-references between paint servers;
• content re-used as part of a graphical effect on another element, including the child content ofmarkers,paint server elements,‘clipPath’, and‘mask’.

Shadow DOM elements are rendered in the same way as normal elements, as if the host element (e.g., the‘use’ element) was a container and the shadow content was its descendents. Style and geometry properties on the shadow DOM elements are resolved independently from those on theircorresponding element in the source document. Thedisplay property has its normal effect on shadow elements, except for special rules that apply to the‘symbol’ element.

For blending purposes, the‘use’ element forms anon-isolated group.

In contrast, graphical effects elements generate a self-contained SVG fragment which is rendered independently as astacking context and anisolated group. The canvas for this fragment is scaled The graphical effect element's child content is rendered and composited into this canvas. The flattened canvas as a whole is treated as a vector image when compositing and blending with other paint layers

Thedisplay property on any child content of a graphical effects element has its normal effect when set tonone, excluding that subtree from being used in rendering. However, the graphical effect is not altered by a value ofdisplay: none on the graphical effect element or an ancestor.

3.3. The painters model

SVG uses a "painters model" of rendering.Paintis applied in successive operations to the output device suchthat 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 backgroundfor the next painting operation.SVG 2 supports advanced blending modes and compositing operations thatcontrol how each painting operation interacts with the background.The rules governing these painting operations are outlined in theCompositing and Blending Specification.

3.4. Rendering order

Elements in SVG are positioned in three dimensions. In addition to theirposition on the x and y axis of theSVG viewport, SVG elements are alsopositioned on the z axis. The position on the z-axis defines the order thatthey are painted.

Along the z axis, elements are grouped intostacking contexts.

Individualgraphics elements are treated as if they are anon-isolated group,the components (fill, stroke, etc) that make up a graphic element(SeePainting shapes and text) beingmembers of that group. SeeHow groups are rendered.

Grouping elements, such as the‘g’ element (seecontainer elements) create acompositing group.Similarly, a‘use’ element creates a compositing group for its shadow content.TheCompositing and Blendingspecification normatively describes how to rendercompositing groups.In SVG, effects may be applied to a group. For example, opacity, filtersor masking. These effects are applied to the rendered result of the groupimmediately before any transforms on the group are applied, which are appliedimmediately before the group is blended and composited with thegroup backdrop. Applying any such effects to a group makes thatgroup isolated.

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

1. Theinitial backdrop is set to a new buffer initialised withrgba(0,0,0,0)
2. The contents of the group that aregraphics elements or‘g’ elements are renderedin order, onto theinitial backdrop
3. filters and other effects that modify the group canvas are applied

   To provide for high quality rendering, filterprimitives and other bitmap effects must be applied in theoperating coordinate space.

4. Group transforms are applied
5. The group canvas is blended and composited with thegroup backdrop

1. Theinitial backdrop is set to thegroup backdrop
2. The contents of the group that aregraphics elements or‘g’ elements are renderedin order, onto theinitial backdrop. The group transforms are applied to each elementas they are rendered.

The following example illustrates various usage of theopacityproperty 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>

Each group of red and green circles is first renderedto an offscreen image before being blended with the backgroundblue rectangle as a whole, with the givenopacity 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 hasopacity of 1, as do the circles.
• The second group shows group opacity when the elements in the group areopaque.
• The third and fourth group show that opacity is not commutative. In thethird group (which has opacity of 1), a semi-transparent green circle isdrawn on top of a semi-transparent red circle, whereas in the fourth group asemi-transparent red circle is drawn on top of a semi-transparent greencircle. Note that area where the two circles intersect display differentcolors. 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. Theresult is that the portion of the red circle which does not overlap with thegreen circle (i.e., the top/right of the red circle) will blend into theblue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, afterblending into the blue rectangle, results in a blended color which is 25%red and 75% blue.

3.9. Clipping and masking

SVG supports the following clipping/masking features:

• clipping paths, which either usesany combination of‘path’,‘text’ andbasic shapes or basic shapes to serve asthe outline of a (in the absence of anti-aliasing) 1-bitmask, where everything on the "inside" of the outline isallowed to show through but everything on the outside ismasked out
• masks, which arecontainer elementswhich can containgraphics elementsor other container elements which define a set of graphicsthat is to be used as a semi-transparent mask for compositingforeground objects into the current background.

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

Theoverflow property has the same parameter values and has thesame meaningas defined in CSS 2.1([CSS2], section 11.1.1);however, the following additional points apply:

• If theoverflow property has a value of 'visible', the property has no effect (i.e., a clipping rectangle is not created).
• For those elements to which theoverflow property can apply. If theoverflow property has the value hidden orscroll, a clip, the exact size of the SVG viewport is applied.
• Whenscroll 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 SVG viewport whether or not any of its content is clipped.
• Within SVG content, the valueauto implies that all rendered content for child elements must bevisible, either through a scrolling mechanism, or by rendering with no clip. For elements where the value ofscroll results in a scrolling mechanism being used by the user agent, then a value ofauto may be treated asscroll. If the user agent has no scrolling mechanism, the content would not be clipped, or the value 'scroll' is treated ashidden, then the valueauto must be treated asvisible