Abstract
This Working Draft defines features of the Scalable Vector Graphics (SVG) Language
that are specifically for display and printing environments.
This document defines the markup used by SVG Compositing.
Status of This Document
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 compositing.
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 compositing and should not yet be considered stable. There is an accompanying
SVG Compositing 1.2, Part 1: Primer that lists
the ways SVG Compositing may be used for displaying and 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.
How to read this document and give feedback
This draft of SVG Compositing is a snapshot of a 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
public-svg-compositing@w3.org. Please include some kind of keyword that identifies
the area of the specification the comment is referring to in the subject line of
your message (e.g Compositing blend modes). If you have comments on multiple areas
of this document, then it is probably best to split those comments into multiple
messages.
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.
Introduction
This document lists features that may be used in the context of display and printing.
The various usage scenarios are listed in the SVG Compositing Requirements document.
This document is normative.
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.
Alpha Compositing
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.
Container Element Background Control
The 'clip-to-self' property
The 'clip-to-self' property determines if the object
effects pixels not covered by the object.
- 'clip-to-self'
-
|
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
|
- object
- 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.
The 'enable-background' property
The 'enable-background' property controls how
the group image canvas for group compositing is initialised and managed.
- 'enable-background'
-
|
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
|
- new
-
A group image canvas is established which is initialised to transparent
black. An additional group background buffer is created to store the
percentage of background in the group image canvas. All children of the
current element shall be rendered into the new group image canvas.
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 canvas is established which is initialised with
corresponding area of the current canvas copied into it. An additional
group background buffer is created to store the percentage of background
in the group image canvas. All children of the current element shall be
rendered into the new group image canvas. 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.
For groups with an 'enable-background' value set to
accumulate, the compositing operation used to place
the group onto the background is modified. The operation will apply any reduction to
the background caused by the objects.
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.
Elements containing a 'comp-op' property value of
clear, src,
dst, dst-over,
src-in, dst-in,
src-out, dst-out,
src-atop, dst-atop,
xor can potentially reduce the opacity of
the destination and are only valid where one of the element's ancestorial
container element has the 'enable-background'
property set to new. Elements without an ancestor
with the 'enable-background' property set to
new these operations are technically an
error.
A User Agent MUST ignore the operation specified for elements with an encestor and 'enable-background' set to new.
The element MUST be rendered using the 'src-over' compositing operation.
The 'knock-out' property
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.
Container Element Compositing Operators
The 'comp-op' property
The 'comp-op' property determines the
compositing operation used when placing elements onto the canvas.
- 'comp-op'
-
|
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: |
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 opactiy of the objects within the container
element as specified by the 'comp-op' property.
References
Normative References
- [SVG12]
-
Scalable Vector Graphics (SVG) 1.2 Specification, Dean Jackson
editor, W3C, 27 October 2004 (Working Draft). See
http://www.w3.org/TR/2004/WD-SVG12-20041027/
- [SVG12Reqs]
-
SVG 1.1/1.2/2.0 Requirements, Dean Jackson editor, W3C, 22 April
2002 (Working Draft). See
http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/
- [SVG12CompositingReqs]
-
SVG Compositing Requirements, Anthony Grasso editor, W3C, 2007 (Working Draft).
See
Author List
The authors of this specification are the participants of the W3C SVG Working Group.
- Anthony Grasso, Canon Information Systems Research Australia