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 [PorterDuff] 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.
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 the
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 Editor's 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 Editor's 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 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 definition 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 Full 1.1 [SVG11] and SVG Tiny 1.2 [SVGT12] both use 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 attempts to addresses compositing requirement for graphical features outlined in SVG 1.1/1.2/2.0 Requirements document [SVGReqs]. To achieve this requirement the SVG Compositing Module extends the Simple Alpha Compositing model in SVG Full 1.1 [SVG11] and SVG Tiny 1.2 [SVGT12]. This SVG module supports the following clipping/masking features:
This section in normative.
For SVG shapes and text, the painted region is the union of fill and stroke regions producing a resultant outline that represents the canvas area painted by the object regardless of any opacity values applied to the object. When calculating the painted region of an object the user agent must use all fill and stroke properties to determine the final painted region. The fill and stroke values of elements that make up the markers placed on shape must contribute to the painted region of an object.
Examples:
For SVG images and videos, if the computed value of the reference points to a valid resource, the painted region is the bounds of the object. Otherwise, the object has no painted region.
For SVG filters, the painted region is the object's painted region that references the filter.
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 premultiplied 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.
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 premultiplied values prior to rendering. The following are specified for each compositing operation:
X, Y, Z, f(Sc, Dc)
defined as:
Depending on the compositing operation, each of the above values may or may not be used in the generation of the destination pixel value.
This section in normative.
When compositing using Porter-Duff extended blending operations color and opacity values may fall outside the range zero to one.
This section in normative.
The 'clip-to-self' property provides compatibility with Java2D by determining if the object effects pixels not covered by the object.
| Value: | object | canvas | inherit |
| Initial: | canvas |
| Applies to: | All elements that render. The host language is responsible for stating which elements render. For SVG: container elements and graphics elements. |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
Graphics elements where the 'clip-to-self' property is set to object only effect the pixels within the extent of the element's painted region. A clipping path can be created from an element's painted region when performing a compositing operation where 'clip-to-self' is set to object. When the element is composited onto the canvas, it is composited through the generated clipping path and thus pixels outside of the extent of the element remain unmodified.
Container elements where the 'clip-to-self' property is set to object only effect the pixels within the extend of the container element. For example, if a container element contains two circles, and the container element has the 'clip-to-self' property is set to object, then region outside the circles is unaffected. To perform this operation, the user agent needs to keep track of the extent of each of the elements within the container element and ensure that only the elements are modified. This can be produced by creating a clipping path from each object's painted region and unioning the clipping paths together to produce a resultant clipping path that defines the extent of the pixels covered by 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 resultant clipping path. When the container element is composited onto the canvas, it is composited through the resultant clipping path and thus pixels outside of the extent of the elements within the container remain unmodified.
View this image as SVG (SVG Compositing enabled browsers only)
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 Compositing enabled browsers only)
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 Compositing enabled browsers only)
This section in normative.
The 'enable-background' property controls how the group image canvas for group compositing is initialized and managed.
| Value: | accumulate | new [ <x> <y> <width> <height> ] | inherit |
| Initial: | accumulate |
| 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 |
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.
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.
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).
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 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:
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 '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))
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.
View this image as SVG (SVG Compositing enabled browsers only)
This section in normative.
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.
| 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 |
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.
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 Compositing enabled browsers only)
This section in normative.
The 'comp-op' property determines the compositing operation used when placing elements onto the canvas.
| Value: | clear | src | dst | src-over | dst-over | src-in | dst-in | src-out | dst-out | src-atop | dst-atop | xor | plus | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | inherit |
| Initial: | src-over |
| Applies to: | All elements that render. The host language is responsible for stating which elements render. For SVG: container elements and graphics elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
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 premultiplied by the corresponding alpha value. The following identifiers have the attached meaning in the equations following on from the identifiers.
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.
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 following equations.
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:
View this image as SVG (SVG Compositing enabled browsers only)
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:
View this image as SVG (SVG Compositing enabled browsers only)
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:
View this image as SVG (SVG Compositing enabled browsers only)
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:
View this image as SVG (SVG Compositing enabled browsers only)
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 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 following diagram shows multiply compositing:
View this image as SVG (SVG Compositing enabled browsers only)
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 following diagram shows screen compositing:
View this image as SVG (SVG Compositing enabled browsers only)
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)
= Sca × (1 + Da) + Dca × (1 + Sa) - 2 × Dca × Sca - Da × Sa
Da' = Sa + Da - Sa × Da
The following diagram shows overlay compositing:
View this image as SVG (SVG Compositing enabled browsers only)
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 following diagram shows darken compositing:
View this image as SVG (SVG Compositing enabled browsers only)
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 following diagram shows lighten compositing:
View this image as SVG (SVG Compositing enabled browsers only)
The destination color is brightened to reflect the source color. Painting with black preserves the original color.
if Sc == 1
f(Sc,Dc) = 1
otherwise
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' = Sa × Da × min(1, Dca/Da × Sa/(Sa - Sca)) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
The following diagram shows color-dodge compositing:
View this image as SVG (SVG Compositing enabled browsers only)
The destination color is darkened to reflect the source color. Painting with white preserves the original color.
if Sc == 0
f(Sc,Dc) = 0
otherwise
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 - Sa × Da × min(1, (1 - Dca/Da) × Sa/Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
= Sa × Da × (1 - min(1, (1 - Dca/Da) × Sa/Sca)) + Sca × (1 - Da) + Dca × (1 - Sa)
Da' = Sa + Da - Sa × Da
The following diagram shows color-burn compositing:
View this image as SVG (SVG Compositing enabled browsers only)
The source color is used to determine if the resultant is either a multiplication or screening of the colors. 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) = 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)
= Sca × (1 + Da) + Dca × (1 + Sa) - Sa × Da - 2 × Sca × Dca
Da' = Sa + Da - Sa × Da
The following diagram shows hard-light compositing:
View this image as SVG (SVG Compositing enabled browsers only)
The source colour is used to determine if the resultant color is darkened or lightened. 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) × (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)
= Da × (2 × Sca - Sa) × (16 × m^3 - 12 × m^2 - 3 × m) + Sca - Sca × Da + Dca
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 × (2 × Sca - Sa) × (m^0.5 - m) + Sca - Sca × Da + Dca
Da' = Sa + Da - Sa × Da
Where:
m = Dca/Da
The following diagram shows soft-light compositing:
View this image as SVG (SVG Compositing enabled browsers only)
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:
View this image as SVG (SVG Compositing enabled browsers only)
The resultant color is similar to that of the difference operation. However, the exclusion resultant color appears as a lower contrast than that 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:
View this image as SVG (SVG Compositing enabled browsers only)
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.
The authors of this specification are the participants of the W3C SVG Working Group.
