Implementations of SVG must implement the rendering model as described in this chapter, as modified in the appendix on conformance requirementswhich describes situations where an implementation may deviate. In practice variability is allowed based on 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).
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).
3.4.1. Establishing a stacking context in SVG
A new stacking context must be established at an SVG element for its descendants if:
the element is an inner ‘svg’ element and the computed value of its overflow property is a value other than visible
the element is subject to explicit clipping:
the clip property applies to the element and it has a computed value other than auto
the clip-path property applies to the element and it has a computed value other than none
the opacity property applies to the element and it has a computed value other than 1
the mask property applies to the element and it has a computed value other than none
the filter property applies to the element and it has a computed value other than none
a property defined in another specification is applied and that property is defined to establish a stacking context in SVG
Stacking contexts 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 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. Elements 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:
the background and borders of the element forming the stacking context, if any
descendants, in tree order
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.
3.5. How elements are rendered
3.6. How groups are rendered
3.6.1. Object and group opacity: the effect of the ‘opacity’ property
See the CSS Color Module Level 3 for the definition of opacity. [css-color-3]
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.
There are several other opacity-related properties in SVG:
fill-opacity, which specifies the opacity of a fill operation;
stroke-opacity, which specifies the opacity of a stroking operation; and
stop-opacity, which specifies the opacity of a gradient stop.
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.
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.
3.7. Types of graphics elements
SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:
Shapes, which represent some combination of straight line and curves
Text, which represents some combination of character glyphs
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.7.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.
The fill and stroke operations are entirely independent; for instance, each fill or stroke operation has its own opacity setting.
SVG supports numerous built-in types of paint which can be used in fill and stroke operations. These are described in Paint Servers.
3.7.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.
3.8. Filtering painted regions
SVG allows any painting operation to be filtered. (See Filter Effects.)
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.
3.10. Parent compositing
SVG document fragments can be semi-opaque.
In accordance with the Compositing and Blending specification, the ‘svg’ element always creates an isolated group. When an SVG document is a top-level document, meaning it is not embedded in another document, the root ‘svg’ element is considered to be the page group and is composited with a backdrop of white with 100% opacity. In all other cases, the SVG document or document fragment is composited into the parent document with opacity preserved.
3.11. The effect of the ‘overflow’ property
See the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [CSS2] for the definition of overflow.
