5 SVG Rendering Model

5.1 Introduction

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 should match that described by this model.

The chapter 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 range of colors may 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.)

5.1.1 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 over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. This model is more sophisticated than older models in that the paint may be only partially opaque. 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 Blending.

5.1.2 Rendering Order

Elements in an SVG document have an implicit drawing order, with the first elements in the SVG document getting "painted" first. Subsequent elements are painted on top of previously painted elements.

5.1.3 Grouping

Grouping elements such as the <g> have the effect of producing a temporary separate canvas onto which child elements are painted. Upon the completion of the group, the effect is as if the group's canvas is painted onto the ancestors canvas using the standard rendering rules for individual graphic objects.

5.1.4 Specifying paint

Paint is specified as a color and an opacity. Color is normally specified using the RGB values traditionally used in computer systems. This is defined in Color. Opacity is simply a measure of the amount of the underlying color that the new paint obscures - a percentage or fractional value.

Paint may also be specified as a combined color and opacity value by specifying an external bitmap image. This is discussed in more detail below.

5.1.5 Specifying the painted region

Paint, when specified as color and opacity, is associated with a painting operation that fills a particular region or draws a line along a particular path. SVG specifies in Paths a syntax for defining such a path as well as rules which determine what parts of an output device are within the path and what parts are outside. These latter rules allow a painted region to be determined from a path.

[The rendering model also needs a precise definition of how line width and joins are interpreted]

5.1.6 Use of external bitmap images

An image specifies both paint and the region that it fills by giving an array of values that specify the paint color and opacity (often termed alpha) at a series of points normally on a rectangular grid.

SVG requires support for specified bitmap formats under conformance requirements.

When an 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.

5.1.7 Restricting painted regions

SVG allows any painting operation to be limited to a sub-region of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.

Clipping uses a path to define a region of the output device to which paint may be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. "Within" is defined by the same rules used to determine the interior of a path for painting.

Masking uses the alpha channel or color information in a referenced SVG element to restrict the painting operation. In this case the opacity information within the alpha channel is used to define the region to which paint may be applied - any region of the output device that, after resampling the alpha channel appropriately, has a zero opacity must not be affected by the paint operation. All other regions composite the paint from the paint operation onto the the output device using the algorithms described in Clipping, Masking and Compositing.

Masking may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask defines an infinite alpha channel with a single opacity. (See 'opacity' property.) Additionally, opacity can be set for fill and stroke operations. (See 'fill-opacity' property and 'stroke-opacity' property.

In all cases the SVG implementation must behave as though all qualified painting is done first to an intermediate (imaginary) canvas then filtered through the clip area or mask. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.

5.1.8 Filtering painted regions

SVG also 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, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.

5.1.9 Parent Compositing

SVG documents can be semi-opaque. In many environments (e.g., web browsers), the SVG document has a final compositing step where the document as a whole is blended translucently into the background canvas.

5.2 Rendering Properties

The creator of an SVG document might want to provide a hint to the implementation about what tradeoffs to make as it renders vector graphics objects such as <path> elements and other vector graphic shapes such as circles and rectangles. The 'shape-rendering' property provides these hints.

'shape-rendering'
Value:   default | optimize-speed | crisp-edges | geometric-precision | inherit
Initial:   false
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

'shape-rendering' provides a hint to the SVG user agent about how to optimize its shape rendering.

default
Indicates that the user agent should make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
optimize-speed
Indicates that the user agent should emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.
crisp-edges
Indicates that the user agent should attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
geometric-precision
Indicates that the user agent should emphasize geometric precision over speed and crisp edges.

The creator of an SVG document might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The 'text-rendering' property provides these hints.

'text-rendering'
Value:   default | optimize-speed | optimize-legibility | geometric-precision | inherit
Initial:   default
Applies to:  <text> elements
Inherited:  yes
Percentages:  N/A
Media:  visual

'text-rendering' provides a hint to the SVG user agent about how to optimize its text rendering.

default
Indicates that the user agent should make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
optimize-speed
Indicates that the user agent should emphasize rendering speed over legibility and geometric precision. This option will sometimes cause the user agent to turn off text anti-aliasing.
optimize-legibility
Indicates that the user agent should emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
geometric-precision
Indicates that the user agent should emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

The creator of an SVG document might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing. The 'image-rendering' property provides a hint to the SVG user agent about how to optimize its image rendering.

'image-rendering'
Value:   default | optimize-speed | optimize-quality | inherit
Initial:   default
Applies to:  <text> elements
Inherited:  yes
Percentages:  N/A
Media:  visual
default
Indicates that the user agent should make appropriate tradeoffs to balance speed and quality, but quality should be given more importance than speed.
optimize-speed
Indicates that the user agent should emphasize rendering speed over quality. This option will sometimes cause the user agent to use a bilinear image resampling algorithm.
optimize-quality
Indicates that the user agent should emphasize quality over rendering speed. This option will sometimes cause the user agent to use a bicubic image resampling algorithm.

The 'visibility' indicates whether a given object should be rendered at all.

'visibility'
Value:   visible | hidden | inherit
Initial:   visible
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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

visible
The current object should be drawn.
hidden
The current object should not be drawn.