SVG Compositing 1.2, Part 1: Primer
W3C Working Draft
Copyright © 2004 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
Copyright © 2004 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
SVG is language for describing vector graphics, however it's typically rendered to 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 Working Draft is a primer for use of the Scalable Vector Graphics (SVG) Language for display and printing environments. It explains the technical background and gives guidelines on how to use the SVG Compositing specification with SVG 1.2 Tiny and SVG 1.2 Full modules for display and printing. It is purely informative and has no conformance statements.
This document introduces the features used by SVG Compositing.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.
This document is an editors draft. 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. There is an accompanying SVG Compositing 1.2, Part 2: Language that defines conformance criteria , new and reintroduced language features for SVG Compositing.
This document has been produced by the W3C SVG Working Group as part of the W3C Graphics Activity within the Interaction Domain. The Working Group expects to advance this Working Draft to Recommendation Status.
We explicitly invite comments on this specification. Please send them to public-svg-compositing@w3.org (archives). For comments on the core SVG language, use 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 public-svg-compositing-request@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.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
The main purpose of this document is to encourage public feedback. The best way to give feedback is by sending an email to public-svg-compositing@w3.org. Please identify in the subject line of your message the part of the specificationto 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 like this.
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, 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 cotrols 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 1.2 Module extends the Simple Alpha Compositing model in SVG Tiny 1.2. This SVG module supports the following clipping/masking features:
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 mixing of the four sub-pixel regions formed by the overlapping of graphical objects that have an alpha channel value. 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.
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 Non-premultiplied destination color component
Da Destination opacity component
Da(d) Extra opacity 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.
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.
View this image as SVG (SVG 1.2 enabled browsers only)
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.
View this image as SVG (SVG 1.2 enabled browsers only)
The 'enable-background' property defines how the group image canvas is initialised when a container element (e.g. a group) is encountered. A value of new indicates that the group image canvas is initialised to be transparent black. This has the effect of clearing the background, creating a "new" background. The accumulate value indicates that the group image canvas 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 image canvas is initially cleared to transparent. This image canvas is treated as the canvas for the complex group's children. When the complete contents of the container element are rendered onto the buffer, the buffer is composited onto the image 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 image canvas. A second buffer which has only an opacity channel is also created. This buffer Da(d) stores the percentage of the background in the image canvas and is initially opaque. The image canvas is treated as the canvas for the children of the group as usual. Additionally, as objects are placed into the image canvas, they are also placed into the Da(d) opacity buffer using one of the operations listed below. Before the group image canvas is composited onto the canvas, any remaining background color in the image canvas is removed using the values in the Da(d) opacity buffer. Other post rendering steps such as the opacity are performed after this step, and before compositing the result onto the canvas.
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 buffer. Depending on the compositing operation, one of two operations listed below are used to draw the object into the extra transparency buffer Da(d).
For the operations clear, src, src-in, dst-in, src-out and dst-atop:
Da(d)' = 0
For all other compositing operations:
Da(d)' = Da(d).(1 - Sa)
Once the contents of a container element are rendered into the container element's buffer and before operations such as opacity or filters are applied to the buffer, the remaining background is removed from the container element's buffer using the following operations:
Dca1' = Dca1 - Dca0.Da1(d)
Da1' = Da1 - Da0.Da1(d)
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 filters 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 group 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))
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.
The optional x, y, width, height parameters on the new value indicate the subregion of the container element's user space where objects are composited onto. These parameters enable the SVG user agent potentially to allocate smaller temporary image buffers than the effective bounds of the container element. Thus, the values x, y, width, height act as a clipping rectangle on the background image canvas. Negative values for width or height are an error. If not all of the x, y, width and height values are specified or if either width or height are specified as zero then the objects are composited as if enable-background property was set to accumulate.
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.
View this image as SVG (SVG 1.2 enabled browsers only)
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)
View this image as SVG (SVG 1.2 enabled browsers only)
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 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.
f(Sc,Dc) = 0
X = 0
Y = 0
Z = 0
Dca' = 0
Da' = 0
f(Sc,Dc) = Sc
X = 1
Y = 1
Z = 0
Dca' = Sca.Da + Sca.(1 - Da)
= Sca
Da' = Sa.Da + Sa.(1 - Da)
= Sa
f(Sc,Dc) = Dc
X = 1
Y = 0
Z = 1
Dca' = Dca.Sa + Dca.(1 - Sa)
= Dca
Da' = Da.Sa + Da.(1 - Sa)
= Da
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 following diagram shows src-over compositing:
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
f(Sc,Dc) = Sc
X = 1
Y = 0
Z = 0
Dca' = Sca.Da
Da' = Sa.Da
The following diagram shows src-in compositing:
f(Sc,Dc) = Dc
X = 1
Y = 0
Z = 0
Dca' = Dca.Sa
Da' = Sa.Da
f(Sc,Dc) = 0
X = 0
Y = 1
Z = 0
Dca' = Sca.(1 - Da)
Da' = Sa.(1 - Da)
The following diagram shows src-out compositing:
f(Sc,Dc) = 0
X = 0
Y = 0
Z = 1
Dca' = Dca.(1 - Sa)
Da' = Da.(1 - Sa)
f(Sc,Dc) = Sc
X = 1
Y = 0
Z = 1
Dca' = Sca.Da + Dca.(1 - Sa)
Da' = Sa.Da + Da.(1 - Sa)
= Da
The following diagram shows src-atop compositing:
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
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.
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
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.
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 following diagram shows multiply compositing:
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.
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 following diagram shows screen compositing:
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.
f(Sc,Dc) = hard-light(Dc,Sc)
or
if 2.Dc < Da
f(Sc,Dc) = 2.Sc.Dc
otherwise
f(Sc,Dc) = 1 - 2.(1 - Dc).(1 - Sc)
X = 1
Y = 1
Z = 1
Dca' = hard-light(Dca.Sa,Sca.Da)
or
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 following diagram shows overlay compositing:
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.
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 following diagram shows darken compositing:
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.
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 following diagram shows lighten compositing:
Brightens the destination color to reflect the source color. Painting with black produces no change.
if Sc == 1
f(Sc,Dc) = 1
otherwise if Sc < 1
f(Sc,Dc) = min(1, Dc/(1 - Sc))
X = 1
Y = 1
Z = 1
if Sca == Sa and Dca == 0
Dca' = Sca.(1 - Da) + Dca.(1 - Sa)
= Sca.(1 - Da)
otherwise if Sca == Sa
Dca' = Sa.Da + Sca.(1 - Da) + Dca.(1 - Sa)
otherwise if Sca < Sa
Dca' = min(Sa.Da, Dca.Sa/(Sa.Da - Sca.Da))
Da' = Sa + Da - Sa.Da
The following diagram shows color-dodge compositing:
Darkens the destination color to reflect the source color. Painting with white produces no change.
if Sc == 0
f(Sc,Dc) = 0
otherwise if Sc > 0
f(Sc,Dc) = 1 - min(1, (1 - Dc)/Sc)
X = 1
Y = 1
Z = 1
if Sca == 0 and Dca == Da
Dca' = Sa.Da + Sca.(1 - Da) + Dca.(1 - Sa)
= Sa.Da + Dca.(1 - Sa)
otherwise if Sca == 0
Dca' = Sca.(1 - Da) + Dca.(1 - Sa)
= Dca.(1 - Sa)
otherwise if Sca > 0
Dca' = Sa.Da - min(Sa.Da, (Sa.Da - Dca.Sa)/Sca.Da) + Sca.(1 - Da) + Dca.(1 - Sa)
Da' = Sa + Da - Sa.Da
The following diagram shows color-burn compositing:
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.
if 2.Sc <= 1
f(Sc,Dc) = multiply(2.Sc,Dc)
otherwise if 2.Sc > 1
f(Sc,Dc) = screen(2.Sc - 1,Dc)
or
if 2.Sc <= 1
f(Sc,Dc) = 2.Sc.Dc
otherwise if 2.Sc > 1
f(Sc,Dc) = 1 - 2.(1 - Dc).(1 - Sc)
X = 1
Y = 1
Z = 1
if 2.Sca <= Sa
Dca' = multiply(2.Sca.Da,Dca.Sa)
otherwise if 2.Sca > Sa
Dca' = screen(2.Sca.Da - 1,Dca.Sa)
or
if 2.Sca <= Sa
Dca' = 2.Sca.Dca + Sca.(1 - Da) + Dca.(1 - Sa)
otherwise if 2.Sca > Sa
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:
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.
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).((((16.Dc - 12).Dc + 4).Dc) - 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 - (Sa.Da - 2.Sca.Da).Dca.Sa.(Sa.Da - Dca.Sa) + Sca.(1 - Da) + Dca.(1 - Sa)
otherwise if 2.Sca > Sa and 4.Dca <= Da
Dca' = Dca.Sa + (2.Sca.Da - Sa.Da).((((16.Dsa.Sa - 12).Dsa.Sa + 4).Dsa.Da) - Dsa.Da) + Sca.(1 - Da) + Dca.(1 - Sa)
otherwise if 2.Sca > Sa and 4.Dca > Da
Dca' = Dca.Sa + (2.Sca.Da - Sa.Da).((Dca.Sa)^0.5 - Dca.Sa) + Sca.(1 - Da) + Dca.(1 - Sa)
Da' = Sa + Da - Sa.Da
The following diagram shows soft-light compositing:
Subtracts the darker of the two constituent colors from the lighter. Painting with white inverts the destination color. Painting with black produces no change.
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:
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.
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:
The authors of this specification are the participants of the W3C SVG Working Group.
