SVG 2 – 11 February 2014 TopContentsPreviousNextElementsAttributesProperties

Chapter 15: Clipping, Masking and Compositing


15.1. Simple alpha compositing

SVG 2 Requirement: Support new compositing and blending modes from the Compositing and Blending specification.
Resolution: SVG WG agrees with publishing the Compositing spec.
Purpose: To allow common graphical effects supported by Illustrator, etc.
Owner: Nikos (ACTION-3332)

Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):

Er, Eg, Eb    - Element color value
Ea            - Element alpha value
Cr, Cg, Cb    - Canvas color value (before blending)
Ca            - Canvas alpha value (before blending)
Cr', Cg', Cb' - Canvas color value (after blending)
Ca'           - Canvas alpha value (after blending)
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

The following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing operations:

Support for simple alpha compositing is mandatory. A future module Compositing and Blending will specify additional compositing and blending operations.

15.2. The ‘overflow’ property

This property definition table need to be replaced with a link to CSS3-box.
Dirk: Probably not. It is a WD, not updated for 5 years.

Name: overflow
Value: visible | hidden | scroll | auto
Initial: visible
Applies to: elements which establish a new viewport, pattern elements and marker elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: yes

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:

We need to define how 'overflow-x' and 'overflow-y' are going to work in the furture. Sadly, these properties belong to CSS3-box.

As a result of the above, the default behavior of SVG user agents is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each pattern and marker element.

15.2.1. Clip to viewport vs. clip to ‘viewBox’

It is important to note that initial values for the ‘overflow’ and ‘clip’ properties and the user agent style sheet will result in an initial clipping path that is set to the bounds of the initial viewport. When attributes viewBox and preserveAspectRatio attributes are specified, it is sometime desirable that the clipping path be set to the bounds of the viewBox instead of the viewport (or reference rectangle, in the case of marker and pattern elements), particularly when preserveAspectRatio specifies uniform scaling and the aspect ratio of the viewBox does not match the aspect ratio of the viewport.

To set the initial clipping path to the bounds of the viewBox, set the bounds of ‘clip’ property to the same rectangle as specified on the viewBox attribute. (Note that the parameters do not match. ‘clip’ takes values <top>, <right>,<bottom> and <left>, whereas viewBox takes values <min-x>, <min-y>, <width> and <height>.)

15.2.2. The initial clipping path

When an svg element is either the root element in the document or is embedded within a document whose layout is determined according to the layout rules of CSS or XSL, then the user agent must establish an initial clipping path for the SVG document fragment. The ‘overflow’ property along with additional SVG user agent processing rules determine the initial clipping path which the user agent establishes for the SVG document fragment:

15.3. Clipping and Masking

SVG supports the following clipping/masking features:

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

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

There are several other opacity-related properties in SVG:

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.

An ‘opacity’ value of 0 means fully transparent and 1 means fully opaque. Opacity values are clamped to the range [0, 1]; see Clamping values which are restricted to a particular range for details.

The ‘opacity’ property applies to the following SVG elements: svg, g, symbol, marker, a, switch, graphics elements and text content child elements.

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

<svg xmlns=""
     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"/>
  <!-- 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"/>
  <!-- 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"/>
  <!-- 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"/>
  <!-- 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"/>
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:

SVG 2 – 11 February 2014 TopContentsPreviousNextElementsAttributesProperties