SVG is a language for describing vector graphics, but it is typically rendered
to a display or some form of print medium. The SVG Compositing module adds support
for the full range of Porter and Duff operators and blending modes. The module allows
for raster and vector objects to be combined to produce eye catching effects.
This document defines the markup used by SVG Compositing for display and printing
environments. It explains the technical background and gives guidelines on how to
use the SVG Compositing specification with the SVG 1.1 Full and SVG 1.2 Tiny
specifications and other SVG modules.
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document is the First Public Working Draft of the SVG Compositing
specification. It defines features of SVG specific to display
and printing. It is a draft in progress; some descriptions in this document may
be incomplete. This document shows the current thoughts of the SVG Working Group
on the use of SVG for display and printing and should not yet be considered stable.
This specification defines conformance criteria, new and reintroduced language
features for SVG Compositing, and lists the ways SVG Compositing may be used for
displaying and compositing. Parts of this specification were previously published in the
SVG Full 1.2 Working Draft[SVG12Full].
We explicitly invite comments on this specification. Please send them to
www-svg@w3.org the public email list for issues related to vector graphics on the Web (archives).
Acceptance of the archiving policy is requested automatically upon first post to
either list. To subscribe to these lists send an email to
www-svg@w3.org or
www-svg-request@w3.org with the word subscribe in the subject line.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
The main purpose of this document is to encourage public feedback. The best way
to give feedback is by sending an email to
www-svg@w3.org. Please identify in the subject line of your
message the part of the specification to which your comment refers (e.g Compositing blend modes).
If you have comments on multiple areas of this document, then it is preferable to send several
separate comments.
The public are welcome to comment on any aspect in this document, but there are
a few areas in which the SVG Working Group are explicitly requesting feedback. These
areas are noted in place within this document with a class attribute value of 'feedback',
which look like this.
Conformance statements in this document are marked as normative, and all equations in
this document are normative. All other content is informative. This document contains
explicit conformance criteria that overlap with some RNG definitions in requirements. If
there is any conflict between the two, the explicit conformance criteria are the definitive
reference.
By defintion compositing is the process by which the colors of objects (and
their surrounding regions) are combined together. In addition to its regular
color values (such as red, green, and blue), an object may contain a channel
to represent the transparency of the color. This channel is commonly known
as an alpha channel and is often said to represent the 'opacity' of an object.
In effect the opacity of an object controls how much of the object's color is
used when compositing.
Compositing involving the alpha channel is referred to alpha compositing. By
default SVG Tiny 1.2 uses
Simple Alpha Compositing
that gives a resultant effect of overlaying the object on to the background.
If the overlayed object contains transparency, the color of the background
may show through the overlayed object.
The SVG Compositing Module extends the Simple Alpha Compositing model in
SVG Tiny 1.2. This SVG module supports the following clipping/masking
features:
advanced alpha compositing, which may be used each time a new element is placed on the canvas.
The operation specified determines the combination of the source color and
alpha, and the destination color and alpha.
clipping paths, which use any combination of ‘path’,
‘text’ and basic shapes to serve as the outline of a
1-bit mask (in the absence of anti-aliasing), 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.
Masking with an element containing only color components with full luminance
(e.g. r=g=b=1) will produce the equivalent result to compositing using the
src-in or dst-in operators.
2 Terms Used in This Specification
This section in normative.
group alpha
The group alpha is a single channel offscreen buffer that is typically
created in-memory when a container element with nested graphical
elements is encountered. The group alpha buffer is used to track
percentage of the background in the
group image
buffer. When the
group image
is composited on to the canvas,
the group alpha is used to ensure that the correct amount of the
group image
is present in the final result.
group image
The group image is an offscreen buffer that is typically created
in-memory when a container element with nested graphical elements is
encountered. Initialisation of a group image buffer is controlled by
the ‘enable-background’
property. Elements nested within the container element are rendered into
the group image buffer. The group is then composited on to the canvas.
3 Alpha Compositing
As out lined in their paper Compositing Digital Images,
Thomas Porter and Tom Duff defined algebra expression for compositing. These expressions
resulted in what is known today as the twelve "Porter Duff" operators. The "Porter Duff"
operators define the results of mixing the four sub-pixel regions formed by the
overlapping of graphical objects that have an alpha channel value.
Graphics elements are composited onto the elements already rendered on the canvas
based on an extended Porter-Duff compositing model, in which the resulting color
and opacity at any given pixel on the canvas depend on the ‘comp-op’ specified.
The base set of 12 Porter-Duff operations shown below always result in a value between
zero and one, and as such, no clamping of output values is required.
In addition to the base set of 12 Porter-Duff operations, a number of blending operations
are supported. These blending operations are extensions of the base Porter-Duff
set and provide enhanced compositing behavior. The extended operations may result
in color and opacity values outside the range zero to one. The opacity value should
be clamped between zero and one inclusive, and the pre-multiplied color value should
be clamped between zero and the opacity value inclusive.
The following diagram shows the four different regions of a single pixel that are
considered when compositing.
Depending on the compositing operation the resultant pixel includes input from one
or more of the regions in the above diagram. For the regions where only source or
destination are present, a choice of including or not including the input is available.
For the region where both are present, various options are available for the combination
of input data.
For groups containing compositing operators, the operation used to composite the
group onto the canvas is the ‘comp-op’ property of the container element itself. Other
properties on container elements, such as ‘opacity’, specify operations that are performed
after the children have been combined and before the group is composited onto the
background. The ‘enable-background’ and ‘knock-out’
properties specify the state the group buffer is initialized
to prior to use, any modification to the compositing of the group's children, and
in some cases a post rendering step to be performed after rendering the children
and prior to any other post rendering steps.
Implementation note: Various container elements calculate their bounds prior to
rendering. For example, rendering a group generally requires an off-screen buffer,
and the size of the buffer is determined by calculating the bounds of the objects
contained within the group. SVG 1.0 implementations generally calculated the bounds
of the group by calculating the union of the bounds of each of the objects within
the group. Depending on the compositing operations used to combine objects within
a group, the bounds of the group may be reduced, and so, reduce the memory requirements.
For example, if a group contains two objects - object A 'in' object B - then the
bounds of the group would be the intersection of the bounds of objects A and B as
opposed to the union of their bounds.
While container elements are defined as requiring a buffer to be generated, it is
often the case that a user agent using various optimizations can choose not to generate
this buffer. For example, a group containing a single object could be directly rendered
onto the background rather than into a buffer first.
The following variables are used to describe the components of the background, group
and extra opacity channel buffers. This definition list is normative.
Sc
Non-premultiplied source color component
Sca
Premultiplied source color component
Sra Sga Sba
Premultiplied source color component
Sa
Source opacity component
Dc
Non-premultiplied destination color component
Dca
Premultiplied destination color component
Dra Dga Dba
Premultiplied destination color component
Da
Destination opacity component
Da(d)
Group alpha buffer containing the percentage of the background channel in the group buffer.
D<n>
Destination buffer <n> where the background is 0, groups in the top level ‘svg’ element 1, nested groups 2 and so forth
D'
The results of the destination post a compositing step
The operation used to place objects onto the background is as follows:
Dca' = f(Sc, Dc) × Sa × Da + Y × Sca × (1-Da) + Z × Dca × (1-Sa)
Da' = X × Sa × Da + Y × Sa × (1-Da) + Z × Da × (1-Sa)
Depending on the compositing operation, the above equation is resolved into an equation
in terms of pre-multiplied values prior to rendering. The following are specified
for each compositing operation:
X, Y, Z, f(Sc, Dc)
defined as:
f(Sc,Dc)
The intersection of the opacity of the source and destination multiplied by some function of the color. (Used for color)
X
The intersection of the opacity of the source and destination. (Used for opacity)
Y
The intersection of the source and the inverse of the destination.
Z
The intersection of the inverse of the source and the destination.
Depending on the compositing operation, each of the above values may or may not
be used in the generation of the destination pixel value.
3.1 Alpha Compositing Syntax
This section in normative.
When compositing using Porter-Duff extended blending operations color and opacity values
may fall outside the range zero to one.
A User Agent MUST clamp color and opacity values between zero and one inclusive.
A User Agent MUST clamp premultiplied color values between zero and one inclusive.
4 Container Element Background Control
4.1
The ‘clip-to-self’ property
The ‘clip-to-self’ property provides compatibility with
Java2D.
Most compositing operations do not remove the destination and as such for
these operations, the ‘clip-to-self’ property
has no effect. The compositing operations that remove the destination are
clear,
src,
src-in,
dst-in,
src-out and
dst-atop.
These operations are illustrated in the compositing operation diagrams and
are the operations that remove the right-hand blue region in diagram. For all
other operations the ‘clip-to-self’ property
has no effect.
Container elements where the ‘clip-to-self’ property
is set to object only effect the pixels within the extent
of the container element. For example, if a container element contains two circles, and
the container element has the ‘clip-to-self’ property set to
object, then nothing outside the circles is effected.
To perform this operation, the renderer needs to keep track of the extent of each of
the elements within the container element and ensure that nothing other than the
elements is modified. This can be produced by converting each object to a clipping
path and unioning the clipping paths together to produce a clipping path that
represents the extent of all the elements within the container element. Where a
container element contains nested container elements, the operation is performed
within the sub-container elements to produce the final path. When the group is
composited onto the page, it is composited through the clipping path generated and
thus nothing outside the extent of all the elements within the container element is
modified.
For filled and stroked shapes and text, the object is directly converted to a clipping
path. For images and filters, the bounds of the object are converted to a clipping
region.
For some container elements where the ‘clip-to-self’
property is set to canvas, the container element
might effect the background outside bounds of the container element.
Compositing an object only effects the pixels covered by the object
canvas
Compositing an object effects all pixels on the canvas by compositing completely
transparent source onto the destination for areas not covered by the object. This
is the
lacuna value.
This property was changed from a boolean value. Where a value of 'object' was
equivalent 'true' and a value of 'canvas' was equivalent to 'false'. Is this
an acceptable change?
The ‘clip-to-self’ property is not the only
property that can affect regions not covered by the source graphic. Some
compositing operations defined in the ‘comp-op’
property may effect pixels
where the source graphic is completely transparent.
A User Agent MUST effect the pixel region as specified by the ‘clip-to-self’ property.
4.2
The ‘enable-background’ property
The ‘enable-background’ property defines how the
group image
is initialised when a container element (e.g. a group) is encountered.
A value of new indicates that the
group image
is initialised to be transparent black. This has the effect of clearing the
group image
buffer, creating a "new" buffer. The accumulate
value indicates that the
group image
is initialised with a copy of the current (background) canvas.
This preserves the background information through compositing and filtering operations.
For a container element with ‘enable-background’ set
to new, the container element's
group image
buffer is initially cleared to transparent. This
group image
is treated as the canvas for the containers's children. When the complete
contents of the container element are rendered onto the
group image,
the buffer is composited onto the canvas
using the container element's specified compositing operation.
For a container element with ‘enable-background’ set
to accumulate, the corresponding area of the
canvas is copied into the container element's
group image
buffer. A
group alpha
buffer which has only an opacity channel is also created. This buffer Da(d)
stores the percentage of the background in the
group image
and is initially opaque. The
group image
is treated as the canvas for the children of the group as usual. Additionally,
as objects are placed into the
group image,
they are also placed into the Da(d)
group alpha
buffer using one of the operations listed below. When all the children of the
container element have been composited in to the
group image
the following steps are performed to merge the
group image
with the canvas.
The group alpha
buffer is inverted to represent the amount of background that needs to be removed
from the canvas.
Any post rendering effects such as group ‘opacity’
are applied to the
group image
and
group alpha
buffers respectively. If no post rendering effects are specified then this
step can be ignored.
For container elements with an ‘enable-background’ set
to accumulate, the compositing
operation used to place the
group image
onto the background
(canvas)
is modified. The operation will apply any reduction to the background caused
by the objects.
When drawing elements within a container element with ‘enable-background’ set to accumulate, the standard
equations as listed below are used to draw the object into the
group image.
Depending on the compositing operation, one of two operations listed below
are used to draw the object into the extra
group alpha
buffer Da(d).
Once the contents of a container element are rendered into the container element's
group image buffer
and before operations such as ‘opacity’
or ‘filter’ effects
are applied to the buffer, the remaining background
(canvas)
is removed from the container element's buffer using the following operations:
At this point Da1(d) should be inverted. The inverted Da1(d) represents the amount
of data to be removed from the background when placing the container element onto
the background.
Da1(d)' = 1 - Da1(d)
The next operation to perform is the application of ‘opacity’
or ‘filter’ effects
to the container element's buffer. During this step, the operation(s) performed on
Da1 should also be performed on Da1(d).
When compositing the container element's
group image buffer
onto the background, rather than the standard compositing operation listed above,
the following operations should be used:
Dca0' = f(Dc1,Dc0) × Da1 × Da0 + Y × Dca1 × (1-Da0) + Z × Dca0 × (1-Da1(d))
Da0' = X × Da1 × Da0 + Y × Da1 × (1-Da0) + Z × Da0 × (1-Da1(d))
The last term in the above equations uses the Da(d) buffer rather than Da.
Filters have access to the nearest ancestor group's buffer through the
BackgroundImage
and
BackgroundAlpha
images. The buffer created for the ancestor group element of the element
referencing the filter, is passed to the filter. Where no ancestors of the
element referencing the filter containing an ‘enable-background’
property value of new, transparent black is
passed as input to the filter.
While container elements are defined as requiring a buffer to be generated, it is
often the case that a user agent using various optimizations can choose not to generate
this buffer. For example, a group containing a single object could be directly rendered
onto the background rather than into a buffer first.
Elements that contain elements that render. The host language is
responsible for stating which elements contain elements that render.
For SVG: container elements.
Inherited:
no
Percentages:
N/A
Media:
visual
Animatable:
no
new
A group image buffer
is established which is initialised to transparent black. All children of
the current element shall be rendered into the new
group image.
The optional <x>,
<y>,
<width> and
<height> parameters indicate in
user space, the subregion of the container element where objects are
composited onto. These parameters act as a clipping rectangle on the
group image
canvas enabling the SVG usage agent to potentially
allocate a smaller temporary image buffer than the effective bounds of
the container element. If not all the
<x>,
<y>,
<width> and
<height> values are specified, or
if either <width> or
<height> are specified as a value
less than 1, then the objects are composited as if the
‘enable-background’ property was set to
accumulate.
accumulate
A group image buffer
is established which is initialized with corresponding area of the current canvas
copied into it. Additionally, a
group alpha buffer
is established which is initialized to be opaque. The
group alpha
is used to store the percentage of background in the
group image.
All children of the current element shall be rendered into the
group image.
This is the lacuna value.
A User Agent MUST initialise the buffer of the container element as specified by ‘enable-background’ property.
A User Agent MUST render children with in a container element as if the ‘enable-background’ property was set to accumulate
if not all the optional new parameters are specified when optional parameters are provided.
A User Agent MUST render children with in a container element as if the ‘enable-background’ property was set to accumulate
if the new optional <width> or <height> parameters are less than 1.
A User Agent MUST apply the reduction to the additional background buffer caused by
compositing an object in the group when ‘enable-background’ is set to accumulate.
A User Agent MUST ignore the operation specified for elements with an ancestor that has ‘enable-background’ set to new.
The element MUST be rendered using the src-over compositing operation.
The above information and assertion appear to be incorrect. Elements with
‘comp-op’ operations that reduce opacity should ensure that they have a
sibling element rendered before them.
4.3
The ‘knock-out’ property
For each object within the container element, the object color and opacity replaces that
of other objects, rather than overlaying it. In effect, the destination input to the
compositing operations for the complex group's children is the original contents of the
buffer, rather than the current buffer for the complex group.
For knock-out: preserve:
Dca1' = f(Sca, Sa, Dca1, Da1)
Da1' = f(Sa, Da1)
For knock-out: replace and enable-background: new:
Dca1' = f(Sca, Sa, 0, 0)
Da1' = f(Sa, 0)
For knock-out: replace and enable-background: accumulate:
Dca1' = f(Sca, Sa, Dca0, Da0)
Da1' = f(Sa, Da0)
An element in a knockout group that does not have the ‘clip-to-self’ property
set, in effect clears all prior elements in the group.
The ‘knock-out’ property determines if the color and opacity
of an object replaces the color and opacity of objects it overlaps in the container.
‘knock-out’
Value:
replace | preserve | inherit
Initial:
preserve
Applies to:
Elements that contain elements that render. The host language is
responsible for stating which elements contain elements that render.
For SVG: container elements.
Inherited:
no
Percentages:
N/A
Media:
visual
Animatable:
no
replace
The object color and opacity replaces that of other objects within the
container element.
preserve
The object color and opacity is overlayed normally as per the container
compositing operation. This is the
lacuna value.
This property was changed from a boolean value. Where a value of 'replace' was
equivalent 'true' and a value of 'preserve' was equivalent to 'false'. Is this
an acceptable change?
For a complex group where the ‘knock-out’ property is
set to replace, the buffer is created. The initial contents
of the buffer and whether a secondary opacity channel is created depends on the value of
the ‘enable-background’ property.
A User Agent MUST effect the color and opactiy of the objects within the container
element as specified by the ‘knock-out’ property.
5 Container Element Compositing Operators
5.1
The ‘comp-op’ property
The canvas contains color components
and an optional alpha component. When placing new elements onto the canvas, the
resulting pixel values on the canvas are calculated using the equations listed in
the sections below.
The diagram below shows the sub-pixel regions output by each of the compositing
operations.
As discussed in the previous section, the bounds of the
parent container element can be optimized to save in memory usage and hence, pixel
writing requirements. Once the bounds of the parent container element have been
determined, each element can only affect the pixels within those bounds.
The following operators change pixels where the source is transparent:
clear,
src,
src-in,
dst-in,
src-out and
dst-atop.
The user agent may be required to create a backing store in which
to generate a container element. The size of the backing store
for a container element using the default compositing operator
src-over is simply the union of
the bounds of the sub-elements of the container element. When
other compositing operators are used, the bounds of the container
element are determined using the compositing operator diagram
above. Starting with an empty bounds, the compositing operator
specifies that the bounds of each successive object within the
container element either replaces the result or is unioned
with the result or is intersected with the result. For most
compositing operators the bounds are unioned with the result. For
the clear composite the current
result is set to empty. For src,
src-out and dst-atop, the bounds are set to
the source bounds. For dst,
dst-out and
src-atop, the bounds are left
unchanged. For src-in and
dst-in the bounds are intersected
with the result.
All color components listed below refer to color component information pre-multiplied
by the corresponding alpha value. The following identifiers have the attached meaning
in the equations below:
Sc - The source element color value.
Sa - The source element alpha value.
Dc - The canvas color value prior to compositing.
Da - The canvas alpha value prior to compositing.
Dc' - The canvas color value post compositing.
Da' - The canvas alpha value post compositing.
clear
Both the color and the alpha of the destination are cleared. Neither the source
nor the destination are used as input.
f(Sc,Dc) = 0
X = 0
Y = 0
Z = 0
Dca' = 0
Da' = 0
src
The source is copied to the destination. The destination is not used as input.
f(Sc,Dc) = Sc
X = 1
Y = 1
Z = 0
Dca' = Sca × Da + Sca × (1 - Da)
= Sca
Da' = Sa × Da + Sa × (1 - Da)
= Sa
dst
The destination is left untouched.
f(Sc,Dc) = Dc
X = 1
Y = 0
Z = 1
Dca' = Dca × Sa + Dca × (1 - Sa)
= Dca
Da' = Da × Sa + Da × (1 - Sa)
= Da
src-over
The source is composited over the destination.
f(Sc,Dc) = Sc
X = 1
Y = 1
Z = 1
Dca' = Sca × Da + Sca × (1 - Da) + Dca × (1 - Sa)
= Sca + Dca × (1 - Sa)
Da' = Sa × Da + Sa × (1 - Da) + Da × (1 - Sa)
= Sa + Da - Sa × Da
The destination is composited over the source and the result replaces the destination.
f(Sc,Dc) = Dc
X = 1
Y = 1
Z = 1
Dca' = Dca × Sa + Sca × (1 - Da) + Dca × (1 - Sa)
= Dca + Sca × (1 - Da)
Da' = Da × Sa + Sa × (1 - Da) + Da × (1 - Sa)
= Sa + Da - Sa × Da
src-in
The part of the source lying inside of the destination replaces the destination.
f(Sc,Dc) = Sc
X = 1
Y = 0
Z = 0
Dca' = Sca × Da
Da' = Sa × Da
The part of the destination lying inside of the source is composited over the source
and replaces the destination.
f(Sc,Dc) = Dc
X = 1
Y = 1
Z = 0
Dca' = Dca × Sa + Sca × (1 - Da)
Da' = Da × Sa + Sa × (1 - Da)
= Sa
xor
The part of the source that lies outside of the destination is combined with the
part of the destination that lies outside of the source.
f(Sc,Dc) = 0
X = 0
Y = 1
Z = 1
Dca' = Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa × (1 - Da) + Da × (1 - Sa)
= Sa + Da - 2 × Sa × Da
The following compositing operators add blending of source and destination colors
beyond the base 12 Porter-Duff operations. The behavior of these operators necessitates
clamping of the output values after compositing.
plus
The source is added to the destination and replaces the destination. This operator
is useful for animating a dissolve between two images.
f(Sc,Dc) = Sc + Dc
X = 1
Y = 1
Z = 1
Dca' = Sca × Da + Dca × Sa + Sca × (1 - Da) + Dca × (1 - Sa)
= Sca + Dca
Da' = Sa × Da + Da × Sa + Sa × (1 - Da) + Da × (1 - Sa)
= Sa + Da
multiply
The source color is multiplied by the destination color and replaces the destination. The resultant
color is always at least as dark as either the source or destination color. Multiplying
any color with black results in black. Multiplying any color with white preserves the
original color.
f(Sc,Dc) = Sc × Dc
X = 1
Y = 1
Z = 1
Dca' = Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa × Da + Sa × (1 - Da) + Da × (1 - Sa)
= Sa + Da - Sa × Da
The source and destination colors are complemented, multiplied and the resultant
color replaces the destination. The resultant color is always at least as light as either
the source or destination colour. Screening any color with white results in white. Screening
any color with black preserves the original color.
f(Sc,Dc) = Sc + Dc - (Sc × Dc)
X = 1
Y = 1
Z = 1
Dca' = (Sca × Da + Dca × Sa - Sca × Dca) + Sca × (1 - Da) + Dca × (1 - Sa)
= Sca + Dca - Sca × Dca
Da' = Sa + Da - Sa × Da
The destination color is used to determine if the resultant is either a
multiplication or screening of the colors. Source colors overlay the
destination whilst preserving its highlights and shadows. The
destination color is mixed with the source color to reflect the
destination lightness or darkness.
if 2 × Dc <= 1
f(Sc,Dc) = 2 × Sc × Dc
otherwise
f(Sc,Dc) = 1 - 2 × (1 - Dc) × (1 - Sc)
X = 1
Y = 1
Z = 1
if 2 × Dca <= Da
Dca' = 2 × Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise
Dca' = Sa × Da - 2 × (Da - Dca) × (Sa - Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
The resultant color is the darker of source or destination colors. If
the source is darker, it replaces the destination. Otherwise, the
destination is preserved.
f(Sc,Dc) = min(Sc,Dc)
X = 1
Y = 1
Z = 1
Dca' = min(Sca × Da, Dca × Sa) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
or
if Sca × Da < Dca × Sa
src-over()
otherwise
dst-over()
The resultant color is the lighter of source or destination colors. If
the source is lighter, it replaces the destination. Otherwise, the
destination is preserved.
f(Sc,Dc) = max(Sc,Dc)
X = 1
Y = 1
Z = 1
Dca' = max(Sca × Da, Dca × Sa) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
or
if Sca × Da > Dca × Sa
src-over()
otherwise
dst-over()
The source color is used to determine if the resultant is either a
multiplication or screening of the colors. Painting with pure black or
white produces black or white.
if 2 × Sc <= 1
f(Sc,Dc) = 2 × Sc × Dc
otherwise
f(Sc,Dc) = 1 - 2 × (1 - Dc) × (1 - Sc)
X = 1
Y = 1
Z = 1
if 2 × Sca <= Sa
Dca' = 2 × Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise
Dca' = Sa × Da - 2 × (Da - Dca) × (Sa - Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
The following diagram shows hard-light compositing:
The source colour is used to determine if the resultant color is darkened or lightened.
If the source color is lighter than or equal to 0.5, the destination is lightened.
If the source color is darker than 0.5, the destination is darkened, as if it were burned in.
Painting with pure black or white produces a distinctly darker or lighter area, but does not
result in pure black or white.
if 2 × Sc <= 1
f(Sc,Dc) = Dc - (1 - 2 × Sc) × Dc × (1 - Dc)
otherwise if 2 × Sc > 1 and 4 × Dc <= 1
f(Sc,Dc) = Dc + (2 × Sc - 1) × (4 × Dc × (4 × Dc + 1) × (Dc - 1) + 7 × Dc)
otherwise if 2 × Sc > 1 and 4 × Dc > 1
f(Sc,Dc) = Dc + (2 × Sc - 1) × ((Dc)^0.5 - Dc)
X = 1
Y = 1
Z = 1
if 2 × Sca <= Sa
Dca' = Dca × (Sa + (2 × Sca - Sa) × (1 - m)) + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise if 2 × Sca > Sa and 4 × Dca <= Da
Dca' = Dca × Sa + Da × (2 × Sca - Sa) × (4 × m × (4 × m + 1) × (m - 1) + 7 × m) + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise if 2 × Sca > Sa and 4 × Dca > Da
Dca' = Dca × Sa + Da × (2 × Sca - Sa) × (m^0.5 - m) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
Where:
m = Dca/Da
The following diagram shows soft-light compositing:
The resultant color is the absolute difference between the source and destination colors.
The destination color is inverted when white is used. The destination color is preserved
when black is used.
f(Sc,Dc) = abs(Dc - Sc)
X = 1
Y = 1
Z = 1
Dca' = abs(Dca × Sa - Sca × Da) + Sca × (1 - Da) + Dca × (1 - Sa)
= Sca + Dca - 2 × min(Sca × Da, Dca × Sa)
Da' = Sa + Da - Sa × Da
The following diagram shows difference compositing:
The resultant color is similar to that of the
difference operation. However,
the exclusion resultant
color appears as a lower contrast than that of of the
difference resultant color. The
destination color is inverted when white is used. The
destination color is preserved when black is used.
f(Sc,Dc) = Sc + Dc - 2 × Sc × Dc
X = 1
Y = 1
Z = 1
Dca' = (Sca × Da + Dca × Sa - 2 × Sca × Dca) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
These equations are approximations which are under review. Final equations may differ
from those presented here.
The following diagram shows exclusion compositing:
Elements that contain elements that render. The host language is
responsible for stating which elements contain elements that render.
For SVG: container elements.
Inherited:
no
Percentages:
N/A
Media:
visual
Animatable:
yes
clear
Both the color and the alpha of the destination are cleared. Neither the source
nor the destination are used as input.
src
The source is copied to the destination. The destination is not used as input.
dst
The destination is left untouched.
src-over
The source is composited over the destination. This is the
lacuna value.
dst-over
The destination is composited over the source and the result replaces the destination.
src-in
The part of the source lying inside of the destination replaces the destination.
dst-in
The part of the destination lying inside of the source replaces the destination.
src-out
The part of the source lying outside of the destination replaces the destination.
dst-out
The part of the destination lying outside of the source replaces the destination.
src-atop
The part of the source lying inside of the destination is composited onto the destination.
dst-atop
The part of the destination lying inside of the source is composited over the source
and replaces the destination.
xor
The part of the source that lies outside of the destination is combined with the
part of the destination that lies outside of the source.
plus
The source is added to the destination and replaces the destination. This operator
is useful for animating a dissolve between two images.
multiply
The source is multiplied by the destination and replaces the destination. The resultant
color is always at least as dark as either of the two constituent colors. Multiplying
any color with black produces black. Multiplying any color with white leaves the
original color unchanged.
screen
The source and destination are complemented and then multiplied and then replace
the destination. The resultant color is always at least as light as either of the
two constituent colors. Screening any color with white produces white. Screening
any color with black leaves the original color unchanged.
overlay
Multiplies or screens the colors, dependent on the destination color. Source colors
overlay the destination whilst preserving its highlights and shadows. The destination
color is not replaced, but is mixed with the source color to reflect the lightness
or darkness of the destination.
darken
Selects the darker of the destination and source colors. The destination is replaced
with the source when the source is darker, otherwise it is left unchanged.
lighten
Selects the lighter of the destination and source colors. The destination is replaced
with the source when the source is lighter, otherwise it is left unchanged.
color-dodge
Brightens the destination color to reflect the source color. Painting with black
produces no change.
color-burn
Darkens the destination color to reflect the source color. Painting with white produces
no change.
hard-light
Multiplies or screens the colors, dependent on the source color value. If the source
color is lighter than 0.5, the destination is lightened as if it were screened.
If the source color is darker than 0.5, the destination is darkened, as if it were
multiplied. The degree of lightening or darkening is proportional to the difference
between the source color and 0.5. If it is equal to 0.5 the destination is unchanged.
Painting with pure black or white produces black or white.
soft-light
Darkens or lightens the colors, dependent on the source color value. If the source
color is lighter than 0.5, the destination is lightened. If the source color is
darker than 0.5, the destination is darkened, as if it were burned in. The degree
of darkening or lightening is proportional to the difference between the source
color and 0.5. If it is equal to 0.5, the destination is unchanged. Painting with
pure black or white produces a distinctly darker or lighter area, but does not result
in pure black or white.
difference
Subtracts the darker of the two constituent colors from the lighter. Painting with
white inverts the destination color. Painting with black produces no change.
exclusion
Produces an effect similar to that of difference,
but appears as lower contrast. Painting with white inverts the destination
color. Painting with black produces no change.
For many of the operators listed above, the destination is modified in regions of
the image where the source is completely transparent. Pixels that the source does
not touch are considered transparent, and as such may be modified, depending on
the compositing operation.
A User Agent MUST effect the color and opacity of the objects within the container
element as specified by the ‘comp-op’ property.
Compositing Digital Images, T. Porter, T. Duff,
Siggraph '84 Conference Proceedings, Association for Computing
Machinery, Volume 18, Number 3, July 1984.
7 Author List
The authors of this specification are the participants of the W3C SVG Working Group.
Anthony Grasso, Canon Information Systems Research Australia
