You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1580 lines
79 KiB
1580 lines
79 KiB
<!--
|
|
SVG Compositing Specification
|
|
|
|
$Id: Overview.html,v 1.10 2011/03/17 12:13:41 clilley Exp $
|
|
|
|
Note: This document is generated from ../master/Overview.html.
|
|
Run "make" from ../master/ to regenerate it.
|
|
-->
|
|
|
|
<!DOCTYPE html
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>SVG Compositing Specification</title><link rel="stylesheet" type="text/css" href="style/svg-style.css"/><link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD" type="text/css"/></head><body>
|
|
|
|
<div class="head">
|
|
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
|
|
<h1 id="pagetitle">SVG Compositing Specification</h1>
|
|
<h2 id="pagesubtitle">W3C Working Draft <em>15 March 2011</em></h2>
|
|
<dl><dt>This version:</dt><dd><a href="http://www.w3.org/TR/2011/WD-SVGCompositing-20110315/" class="url">http://www.w3.org/TR/2011/WD-SVGCompositing-20110315/</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/SVGCompositing/" class="url">http://www.w3.org/TR/SVGCompositing/</a></dd><dt>Previous version:</dt><dd><a href="http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/" class="url">http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/</a></dd><dt>Editors:</dt><dd>Anthony Grasso, Canon Information Systems Research Australia <<a href="mailto:anthony.grasso@cisra.canon.com.au">anthony.grasso@cisra.canon.com.au</a>></dd><dt>Authors:</dt><dd>The authors of this specification are the participants of the W3C SVG Working Group.</dd></dl>
|
|
|
|
|
|
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="abstract">Abstract</h2>
|
|
<p>
|
|
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 <a href="#ref-PorterDuff">[PorterDuff]</a>
|
|
and blending modes. The module allows for raster and vector objects to be combined to
|
|
produce eye catching effects.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<h2 id="status">Status of This Document</h2>
|
|
<p><em>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 <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
|
|
<p>
|
|
This document is the 15 March 2011 Last Call 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.
|
|
</p>
|
|
<p>This document has been produced by the
|
|
<a href="http://www.w3.org/Graphics/SVG/WG">W3C SVG Working Group</a> as part of
|
|
the <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a> within
|
|
the <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>. The
|
|
goals of the W3C SVG Working Group are discussed in the
|
|
<a href="http://www.w3.org/2007/11/SVG_rechartering/SVG-WG-charter.html">W3C SVG Charter</a>.
|
|
The W3C SVG Working Group maintains a public Web page,
|
|
<a href="http://www.w3.org/Graphics/SVG/">http://www.w3.org/Graphics/SVG/</a>,
|
|
that contains further background information. The authors of
|
|
this document are the SVG Working Group participants.</p>
|
|
<p>
|
|
We explicitly invite comments on this specification. Please send them to <a href="mailto:www-svg@w3.org">www-svg@w3.org</a>:
|
|
the public email list for issues related to vector graphics on the Web(<a href="http://lists.w3.org/Archives/Public/www-svg/">archives</a>).
|
|
Acceptance of the archiving policy is requested automatically upon first post to
|
|
either list. To subscribe to this list, send an email to <a href="mailto:www-svg-request@w3.org">
|
|
www-svg-request@w3.org</a> with the word subscribe in the subject line.
|
|
Last Call comments should be sent by 12 April 2011.
|
|
</p>
|
|
<p>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.</p>
|
|
<p>
|
|
This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">
|
|
5 February 2004 <acronym title="World Wide Web Consortium">W3C</acronym> Patent
|
|
Policy</a>. <acronym title="World Wide Web Consortium">W3C</acronym> maintains
|
|
a <a rel="disclosure" href="http://www.w3.org/2004/01/pp-impl/19480/status">public
|
|
list of any patent disclosures</a> 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 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">
|
|
Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">
|
|
section 6 of the <acronym title="World Wide Web Consortium">W3C</acronym> Patent
|
|
Policy</a>.</p>
|
|
<hr/>
|
|
<h2 id="howto">How to read this document and give feedback</h2>
|
|
<p>
|
|
The main purpose of this document is to encourage public feedback. The best way
|
|
to give feedback is by sending an email to <a href="mailto:www-svg@w3.org">www-svg@w3.org</a>. 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.
|
|
</p>
|
|
<p>
|
|
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 <span class="feedback">like this.</span>
|
|
</p>
|
|
|
|
<h2 id="toc">Table of Contents</h2>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#intro">1 Introduction</a></li>
|
|
<li><a href="#terms">2 Terms Used in This Specification</a></li>
|
|
<li><a href="#alphaCompositing">3 Alpha Compositing</a><ul class="toc">
|
|
<li><a href="#alphaCompositing-syntax">3.1 Alpha Compositing Syntax</a></li></ul></li>
|
|
<li><a href="#containerElementBackgoundControl">4 Container Element Background Control</a><ul class="toc">
|
|
<li><a href="#clip-to-self-property">4.1
|
|
The <span class="prop-name">‘clip-to-self’</span> property
|
|
</a></li>
|
|
<li><a href="#enable-background-property">4.2
|
|
The <span class="prop-name">‘enable-background’</span> property
|
|
</a></li>
|
|
<li><a href="#knock-out-property">4.3
|
|
The <span class="prop-name">‘knock-out’</span> property
|
|
</a></li></ul></li>
|
|
<li><a href="#containerElementCompositingOperators">5 Container Element Compositing Operators</a><ul class="toc">
|
|
<li><a href="#comp-op-property">5.1
|
|
The <span class="prop-name">‘comp-op’</span> property
|
|
</a></li></ul></li>
|
|
<li><a href="#references">6 References</a><ul class="toc">
|
|
<li><a href="#normref">6.1 Normative References</a></li>
|
|
<li><a href="#informref">6.2 Informative References</a></li></ul></li>
|
|
<li><a href="#authors">7 Author List</a></li>
|
|
<li><a href="#authors">8 Changes</a></li>
|
|
</ul>
|
|
|
|
|
|
<h2 id="intro">1 Introduction</h2>
|
|
<p>
|
|
<em>Conformance statements in this document are marked as normative, and all equations in
|
|
this document are normative. All other content is informative.</em> 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.
|
|
</p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
Compositing involving the alpha channel is referred to alpha compositing. By
|
|
default SVG Full 1.1 <a href="#ref-SVG11Full">[SVG11]</a> and SVG Tiny 1.2
|
|
<a href="#ref-SVG12Tiny">[SVGT12]</a> both use
|
|
<a href="http://www.w3.org/TR/SVGTiny12/painting.html#CompositingSimpleAlpha">Simple Alpha Compositing</a>
|
|
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.
|
|
</p>
|
|
<p>
|
|
The SVG Compositing Module attempts to addresses compositing requirement for
|
|
graphical features outlined in SVG 1.1/1.2/2.0 Requirements document
|
|
<a href="#ref-SVGRequirements">[SVGReqs]</a>. To achieve this requirement
|
|
the SVG Compositing Module extends the Simple Alpha Compositing model in SVG
|
|
Full 1.1 <a href="#ref-SVG11Full">[SVG11]</a> and SVG Tiny 1.2
|
|
<a href="#ref-SVG12Tiny">[SVGT12]</a>. This SVG module supports the
|
|
following clipping/masking features:
|
|
</p>
|
|
<ul><li>
|
|
advanced alpha compositing, which may be used each time a new element is placed on the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>.
|
|
The operation specified determines the combination of the source color and
|
|
alpha, and the destination color and alpha.
|
|
</li><li>
|
|
clipping paths, which use any combination of <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/paths.html#PathElement"><span class="element-name">‘path’</span></a>,
|
|
<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/text.html#TextElement"><span class="element-name">‘text’</span></a> 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
|
|
</li><li>
|
|
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.
|
|
</li></ul>
|
|
<div class="note">
|
|
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
|
|
<strong>src-in</strong> or <strong>dst-in</strong> operators.
|
|
</div>
|
|
|
|
<h2 id="terms">2 Terms Used in This Specification</h2>
|
|
<p><em>This section in normative.</em></p>
|
|
<dl><dt id="term-group_alpha">group alpha</dt><dd>
|
|
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
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
buffer. When the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
is composited on to the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>,
|
|
the group alpha is used to ensure that the correct amount of the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
is present in the final result.
|
|
</dd><dt id="term-group_image">group image</dt><dd>
|
|
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 <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a>
|
|
property. Elements nested within the container element are rendered into
|
|
the group image buffer. The group is then composited on to the canvas.
|
|
</dd><dt id="term-painted_region">painted region</dt><dd>
|
|
The host language is reponsible for defining the painted region represented by each element.
|
|
<p>
|
|
For SVG <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermShape">shapes</a>
|
|
and <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/text.html#TextElement">text</a>,
|
|
the <a href="#term-painted_region"><span class="comp-op-term">painted region</span></a> 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 <a href="#term-painted_region"><span class="comp-op-term">painted region</span></a>
|
|
of an object the user agent must use all
|
|
<a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/painting.html">fill and stroke</a>
|
|
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.
|
|
</p>
|
|
<p>Examples:</p>
|
|
<ul><li>
|
|
If an object contains computed <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘fill’</span></a> value <span class="prop-value">#FFF</span>, then all painted
|
|
pixels of the object contribute to the object's painted region even if it has a <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillOpacityProperty"><span class="prop-name">‘fill-opacity’</span></a> of
|
|
<span class="prop-value">0</span>.
|
|
</li><li>
|
|
If an object contains computed <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘fill’</span></a> value of <span class="prop-value">none</span> and a dashed stroke
|
|
defined by <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#StrokeDasharrayProperty"><span class="prop-name">‘stroke-dasharray’</span></a>, then its painted region will only be the pixels touched by the dashes
|
|
in the computed stroke.
|
|
</li><li>
|
|
If a path contains a computed <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘fill’</span></a> and <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘stroke’</span></a> value of <span class="prop-value">none</span> but
|
|
contains markers along it, then the painted region will only be the pixels touched by the computed <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘fill’</span></a>
|
|
and <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#FillProperty"><span class="prop-name">‘stroke’</span></a> values of the elements that make up the markers along the path.
|
|
</li></ul>
|
|
<p>
|
|
For SVG <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#ImageElement">images</a>
|
|
and <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#VideoElement">videos</a>,
|
|
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.
|
|
</p>
|
|
<p>
|
|
For SVG <a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/filters.html">filters</a>, the painted region
|
|
is the object's painted region that references the filter.
|
|
</p>
|
|
</dd></dl>
|
|
|
|
<h2 id="alphaCompositing">3 Alpha Compositing</h2>
|
|
<p>
|
|
As out lined in their paper <a href="#ref-PorterDuff">Compositing Digital Images</a>,
|
|
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.
|
|
</p>
|
|
<p>
|
|
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 <a href="#comp-op-property"><span class="prop-name">‘comp-op’</span></a> 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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
The following diagram shows the four different regions of a single pixel that are
|
|
considered when compositing.
|
|
</p>
|
|
<p>
|
|
<img src="resources/compregion.png" alt="Compositing regions - source and destination interaction"/>
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
For groups containing compositing operators, the operation used to composite the
|
|
group onto the canvas is the <a href="#comp-op-property"><span class="prop-name">‘comp-op’</span></a> property of the container element itself. Other
|
|
properties on container elements, such as <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#OpacityProperty"><span class="prop-name">‘opacity’</span></a>, specify operations that are performed
|
|
after the children have been combined and before the group is composited onto the
|
|
background. The <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> and <a href="#knock-out-property"><span class="prop-name">‘knock-out’</span></a>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
The following variables are used to describe the components of the background, group
|
|
and extra opacity channel buffers. This definition list is normative.
|
|
</p>
|
|
|
|
<dl><dt id="term-Sc">Sc</dt><dd>Non-premultiplied source color component</dd><dt id="term-Sca">Sca</dt><dd>Premultiplied source color component</dd><dt id="term-Sra_Sga_Sba">Sra Sga Sba</dt><dd>Premultiplied source color component</dd><dt id="term-Sa">Sa</dt><dd>Source opacity component</dd><dt id="term-Dc">Dc</dt><dd>Non-premultiplied destination color component</dd><dt id="term-Dca">Dca</dt><dd>Premultiplied destination color component</dd><dt id="term-Dra_Dga_Dba">Dra Dga Dba</dt><dd>Premultiplied destination color component</dd><dt id="term-Da">Da</dt><dd>Destination opacity component</dd><dt id="term-Da_d">Da(d)</dt><dd><a href="#term-group_alpha"><span class="comp-op-term">Group alpha</span></a> buffer containing the percentage of the background channel in the group buffer.</dd><dt id="term-D_n">D<n></dt><dd>Destination buffer <n> where the background is 0, groups in the top level <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#SVGElement"><span class="element-name">‘svg’</span></a> element 1, nested groups 2 and so forth</dd><dt id="term-D_prime">D'</dt><dd>The results of the destination post a compositing step</dd></dl>
|
|
<p>
|
|
The operation used to place objects onto the background is as follows:
|
|
</p>
|
|
<pre><code>
|
|
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)
|
|
</code></pre>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<pre><code>
|
|
X, Y, Z, f(Sc, Dc)
|
|
</code></pre>
|
|
<p>
|
|
defined as:
|
|
</p>
|
|
<dl><dt id="term-f_Sc_Dc">f(Sc,Dc)</dt><dd>The intersection of the opacity of the source and destination multiplied by some function of the color. (Used for color)</dd><dt id="term-X">X</dt><dd>The intersection of the opacity of the source and destination. (Used for opacity)</dd><dt id="term-Y">Y</dt><dd>The intersection of the source and the inverse of the destination.</dd><dt id="term-Z">Z</dt><dd>The intersection of the inverse of the source and the destination.</dd></dl>
|
|
<p>
|
|
Depending on the compositing operation, each of the above values may or may not
|
|
be used in the generation of the destination pixel value.
|
|
</p>
|
|
<h3 id="alphaCompositing-syntax">3.1 Alpha Compositing Syntax</h3>
|
|
<p><em>This section in normative.</em></p>
|
|
<p>
|
|
When compositing using Porter-Duff extended blending operations color and opacity values
|
|
may fall outside the range zero to one.
|
|
</p>
|
|
<div class="requirement" id="assert_alphaCompositingColorOpacity">
|
|
A User Agent MUST clamp color and opacity values between zero and one inclusive.
|
|
</div>
|
|
<div class="requirement" id="assert_alphaCompositingPremultiplied">
|
|
A User Agent MUST clamp premultiplied color values between zero and one inclusive.
|
|
</div>
|
|
|
|
<h2 id="containerElementBackgoundControl">4 Container Element Background Control</h2>
|
|
<h3 id="clip-to-self-property">4.1
|
|
The <span class="prop-name">‘clip-to-self’</span> property
|
|
</h3>
|
|
<p><em>This section in normative.</em></p>
|
|
<p>
|
|
The <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property provides compatibility with Java2D by
|
|
determining if the object effects pixels not covered by the object.
|
|
</p>
|
|
<div class="propdef">
|
|
<dl><dt><span class="propdef-title">‘clip-to-self’</span></dt><dd>
|
|
<table summary="clip-to-self-property" class="propinfo" cellspacing="0" cellpadding="0"><tr valign="baseline"><td>
|
|
<em>Value:</em>
|
|
</td><td>
|
|
object | canvas | inherit
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Initial:</em>
|
|
</td><td>
|
|
canvas
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Applies to:</em>
|
|
</td><td>
|
|
All elements that render. The host language is responsible for
|
|
stating which elements render. For SVG: container elements and
|
|
graphics elements.
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Inherited:</em>
|
|
</td><td>
|
|
no
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Percentages:</em>
|
|
</td><td>
|
|
N/A
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Media:</em>
|
|
</td><td>
|
|
visual
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/animate.html#Animatable">Animatable</a>:
|
|
</em>
|
|
</td><td>
|
|
yes
|
|
</td></tr></table>
|
|
</dd></dl>
|
|
</div>
|
|
<dl><dt>canvas</dt><dd>
|
|
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
|
|
<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>.
|
|
</dd><dt>object</dt><dd>
|
|
Compositing an object only effects the pixels covered by the object as
|
|
by the object's <a href="#term-painted_region"><span class="comp-op-term">painted region</span></a>.
|
|
</dd></dl>
|
|
<p>
|
|
Graphics elements where the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property is set to <span class="prop-value">object</span>
|
|
only effect the pixels within the extent of the element's <a href="#term-painted_region"><span class="comp-op-term">
|
|
painted region</span></a>. A clipping path can be created from an element's
|
|
<a href="#term-painted_region"><span class="comp-op-term">painted region</span></a> when performing a compositing
|
|
operation where <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> is set to <span class="prop-value">object</span>. 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.
|
|
</p>
|
|
<p>
|
|
Container elements where the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property is set to <span class="prop-value">object</span>
|
|
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 <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property is set to <span class="prop-value">object</span>, 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 <a href="#term-painted_region"><span class="comp-op-term">painted region</span></a> 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.
|
|
</p>
|
|
<div class="requirement" id="assert_clipToSelf">
|
|
A User Agent MUST affect the pixel region as specified by the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property.
|
|
</div>
|
|
<p>
|
|
<img src="examples/clip-to-self-examples.png" alt="Image showing clip-to-self property" width="412.5" height="400"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/clip-to-self-examples.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
<p>
|
|
Most compositing operations do not remove the destination and as such for
|
|
these operations, the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property
|
|
has no effect. The compositing operations that remove the destination are
|
|
<a href="#comp-op-clear"><span class="prop-value">clear</span></a>,
|
|
<a href="#comp-op-src"><span class="prop-value">src</span></a>,
|
|
<a href="#comp-op-src-in"><span class="prop-value">src-in</span></a>,
|
|
<a href="#comp-op-dst-in"><span class="prop-value">dst-in</span></a>,
|
|
<a href="#comp-op-src-out"><span class="prop-value">src-out</span></a> and
|
|
<a href="#comp-op-dst-atop"><span class="prop-value">dst-atop</span></a>.
|
|
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 <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property
|
|
has no effect.
|
|
</p>
|
|
<p>
|
|
<img src="examples/clip-to-self-01.png" alt="Image showing clip-to-self property" width="378" height="243"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/clip-to-self-01.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
<p>
|
|
For some container elements where the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a>
|
|
property is set to <span class="prop-value">canvas</span>, the container element
|
|
might effect the background outside bounds of the container element.
|
|
</p>
|
|
<p>
|
|
<img src="examples/clip-to-self-02.png" alt="Image showing 'clip-to-self' property" width="513" height="243"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/clip-to-self-02.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
|
|
<h3 id="enable-background-property">4.2
|
|
The <span class="prop-name">‘enable-background’</span> property
|
|
</h3>
|
|
<p><em>This section in normative.</em></p>
|
|
<p>
|
|
The <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property controls how
|
|
the group image canvas for group compositing is initialized and managed.
|
|
</p>
|
|
<div class="propdef">
|
|
<dl><dt><span class="propdef-title prop-name">‘enable-background’</span></dt><dd>
|
|
<table summary="enable-background property" class="propinfo" cellspacing="0" cellpadding="0"><tr valign="baseline"><td>
|
|
<em>Value:</em>
|
|
</td><td>
|
|
accumulate | new [ <x> <y>
|
|
<width> <height> ] | inherit
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Initial:</em>
|
|
</td><td>
|
|
accumulate
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Applies to:</em>
|
|
</td><td>
|
|
Elements that contain elements that render. The host language is
|
|
responsible for stating which elements contain elements that render.
|
|
For SVG: container elements.
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Inherited:</em>
|
|
</td><td>
|
|
no
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Percentages:</em>
|
|
</td><td>
|
|
N/A
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Media:</em>
|
|
</td><td>
|
|
visual
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Animatable:</em>
|
|
</td><td>
|
|
no
|
|
</td></tr></table>
|
|
</dd></dl>
|
|
</div>
|
|
<dl><dt>new</dt><dd>
|
|
A <a href="#term-group_image"><span class="comp-op-term">group image</span></a> buffer
|
|
is established which is initialized to transparent black. All children of
|
|
the current element shall be rendered into the new
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>.
|
|
<p>
|
|
The optional <span class="prop-value"><x></span>,
|
|
<span class="prop-value"><y></span>,
|
|
<span class="prop-value"><width></span> and
|
|
<span class="prop-value"><height></span> 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
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
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
|
|
<span class="prop-value"><x></span>,
|
|
<span class="prop-value"><y></span>,
|
|
<span class="prop-value"><width></span> and
|
|
<span class="prop-value"><height></span> values are specified, or
|
|
if either <span class="prop-value"><width></span> or
|
|
<span class="prop-value"><height></span> are specified as a value
|
|
less than 1, then the objects are composited as if the
|
|
<a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property was set to
|
|
<span class="prop-value">accumulate</span>.
|
|
</p>
|
|
<div class="feedback">
|
|
The optional values for the <strong>new</strong> property is under consideration
|
|
</div>
|
|
|
|
</dd><dt>accumulate</dt><dd>
|
|
A <a href="#term-group_image"><span class="comp-op-term">group image</span></a> buffer
|
|
is established which is initialized with corresponding area of the current canvas
|
|
copied into it. Additionally, a
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a> buffer
|
|
is established which is initialized to be opaque. The
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
is used to store the percentage of background in the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>.
|
|
All children of the current element shall be rendered into the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>.
|
|
This is the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>.
|
|
</dd></dl>
|
|
<div class="requirement" id="assert_enableBackgroundInitialize">
|
|
A User Agent MUST initialize the buffer of the container element as specified by <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property.
|
|
</div>
|
|
<div class="requirement" id="assert_enableBackgroundNewOptionalParametersProvided">
|
|
A User Agent MUST render children with in a container element as if the <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property was set to <span class="prop-value">accumulate</span>
|
|
if not all the optional <span class="prop-value">new</span> parameters are specified when optional parameters are provided.
|
|
</div>
|
|
<div class="requirement" id="assert_enableBackgroundNewOptionalParametersValid">
|
|
A User Agent MUST render children with in a container element as if the <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property was set to <span class="prop-value">accumulate</span>
|
|
if the <span class="prop-value">new</span> optional <width> or <height> parameters are less than 1.
|
|
</div>
|
|
<div class="requirement" id="assert_enableBackgroundAccumulateReduction">
|
|
A User Agent MUST apply the reduction to the additional background buffer caused by
|
|
compositing an object in the group when <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> is set to accumulate.
|
|
</div>
|
|
<p>
|
|
For a container element with <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> set
|
|
to <span class="prop-value">new</span>, the container element's
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
buffer is initially cleared to transparent. This
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
is treated as the canvas for the containers's children. When the complete
|
|
contents of the container element are rendered onto the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>,
|
|
the buffer is composited onto the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>
|
|
using the container element's specified compositing operation.
|
|
</p>
|
|
<p>
|
|
For a container element with <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> set
|
|
to <span class="prop-value">accumulate</span>, the corresponding area of the
|
|
<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a> is copied into the container element's
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
buffer. A
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
buffer which has only an opacity channel is also created. This buffer Da(d)
|
|
stores the percentage of the background in the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
and is initially opaque. The
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
is treated as the canvas for the children of the group as usual. Additionally,
|
|
as objects are placed into the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>,
|
|
they are also placed into the Da(d)
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
buffer using one of the operations listed below. When all the children of the
|
|
container element have been composited in to the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
the following steps are performed to merge the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
with the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>.
|
|
</p>
|
|
<ol><li>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>
|
|
color is removed from the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
color.
|
|
</li><li>
|
|
The <a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
buffer is inverted to represent the amount of background that needs to be removed
|
|
from the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>.
|
|
</li><li>
|
|
Any post rendering effects such as group <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#OpacityProperty"><span class="prop-name">‘opacity’</span></a>
|
|
are applied to the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
and
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
buffers respectively. If no post rendering effects are specified then this
|
|
step can be ignored.
|
|
</li><li>
|
|
The <a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
is composited with the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>
|
|
background using the <a href="#comp-op-src-over"><span class="prop-value">src-over</span></a>
|
|
operator and the <a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
data. The <a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a> is
|
|
used to control the the
|
|
<a href="#comp-op-src-over"><span class="prop-value">src-over</span></a>
|
|
operation such that the correct amount of alpha is removed from the <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>.
|
|
</li></ol>
|
|
<p>
|
|
For container elements with an <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> set
|
|
to <span class="prop-value">accumulate</span>, the compositing
|
|
operation used to place the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>
|
|
onto the background
|
|
(<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>)
|
|
is modified. The operation will apply any reduction to the background caused
|
|
by the objects.
|
|
</p>
|
|
<p>
|
|
When drawing elements within a container element with <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> set to <span class="prop-value">accumulate</span>, the standard
|
|
equations as listed below are used to draw the object into the
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a>.
|
|
Depending on the compositing operation, one of two operations listed below
|
|
are used to draw the object into the extra
|
|
<a href="#term-group_alpha"><span class="comp-op-term">group alpha</span></a>
|
|
buffer Da(d).
|
|
</p>
|
|
<p>
|
|
For the operations
|
|
<a href="#comp-op-clear"><span class="prop-value">clear</span></a>,
|
|
<a href="#comp-op-src"><span class="prop-value">src</span></a>,
|
|
<a href="#comp-op-src-in"><span class="prop-value">src-in</span></a>,
|
|
<a href="#comp-op-dst-in"><span class="prop-value">dst-in</span></a>,
|
|
<a href="#comp-op-src-out"><span class="prop-value">src-out</span></a> and
|
|
<a href="#comp-op-dst-atop"><span class="prop-value">dst-atop</span></a>:
|
|
</p>
|
|
<pre><code>
|
|
Da(d)' = 0
|
|
</code></pre>
|
|
<p>
|
|
For all other compositing operations:
|
|
</p>
|
|
<pre><code>
|
|
Da(d)' = Da(d) × (1 - Sa)
|
|
</code></pre>
|
|
<p>
|
|
Once the contents of a container element are rendered into the container element's
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a> buffer
|
|
and before operations such as <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#OpacityProperty"><span class="prop-name">‘opacity’</span></a>
|
|
or <a href="http://www.w3.org/TR/SVGFilter12/#FilterProperty"><span class="prop-name">‘filter’</span></a> effects
|
|
are applied to the buffer, the remaining background
|
|
(<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermCanvas"><span class="svg-term">canvas</span></a>)
|
|
is removed from the container element's buffer using the following operations:
|
|
</p>
|
|
<pre><code>
|
|
Dca1' = Dca1 - Dca0 × Da1(d)
|
|
Da1' = Da1 - Da0 × Da1(d)
|
|
</code></pre>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
Da1(d)' = 1 - Da1(d)
|
|
</code></pre>
|
|
<p>
|
|
The next operation to perform is the application of <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#OpacityProperty"><span class="prop-name">‘opacity’</span></a>
|
|
or <a href="http://www.w3.org/TR/SVGFilter12/#FilterProperty"><span class="prop-name">‘filter’</span></a> effects
|
|
to the container element's buffer. During this step, the operation(s) performed on
|
|
Da1 should also be performed on Da1(d).
|
|
</p>
|
|
<p>
|
|
When compositing the container element's
|
|
<a href="#term-group_image"><span class="comp-op-term">group image</span></a> buffer
|
|
onto the background, rather than the standard compositing operation listed above,
|
|
the following operations should be used:
|
|
</p>
|
|
<pre><code>
|
|
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))
|
|
</code></pre>
|
|
<div class="note">
|
|
The last term in the above equations uses the Da(d) buffer rather than Da.
|
|
</div>
|
|
<p>
|
|
Filters have access to the nearest ancestor group's buffer through the
|
|
<a href="http://www.w3.org/TR/SVGFilter12/#BackgroundImage">
|
|
<span class="prop-value">BackgroundImage</span>
|
|
</a>
|
|
and
|
|
<a href="http://www.w3.org/TR/SVGFilter12/#BackgroundAlpha">
|
|
<span class="prop-value">BackgroundAlpha</span>
|
|
</a>
|
|
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 <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a>
|
|
property value of <span class="prop-value">new</span>, transparent black is
|
|
passed as input to the filter.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
<img src="examples/enable-background.png" alt="Image showing enable-background-property" width="513" height="243"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/enable-background.svg">View this image as SVG (SVG Compositing enabled browsers only)
|
|
</a>
|
|
</p>
|
|
|
|
<h3 id="knock-out-property">4.3
|
|
The <span class="prop-name">‘knock-out’</span> property
|
|
</h3>
|
|
<p><em>This section in normative.</em></p>
|
|
<p>
|
|
The <a href="#knock-out-property"><span class="prop-name">‘knock-out’</span></a> property determines if the color and opacity
|
|
of an object replaces the color and opacity of objects it overlaps in the container.
|
|
</p>
|
|
<div class="propdef">
|
|
<dl><dt><span class="propdef-title prop-name">‘knock-out’</span> </dt><dd>
|
|
<table summary="knock-out property" class="propinfo" cellspacing="0" cellpadding="0"><tr valign="baseline"><td>
|
|
<em>Value:</em>
|
|
</td><td>
|
|
replace | preserve | inherit
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Initial:</em>
|
|
</td><td>
|
|
preserve
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Applies to:</em>
|
|
</td><td>
|
|
Elements that contain elements that render. The host language is
|
|
responsible for stating which elements contain elements that render.
|
|
For SVG: container elements.
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Inherited:</em>
|
|
</td><td>
|
|
no
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Percentages:</em>
|
|
</td><td>
|
|
N/A
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Media:</em>
|
|
</td><td>
|
|
visual
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Animatable:</em>
|
|
</td><td>
|
|
no
|
|
</td></tr></table>
|
|
</dd></dl>
|
|
</div>
|
|
<dl><dt>replace</dt><dd>
|
|
The object color and opacity replaces that of other objects within the
|
|
container element.
|
|
</dd><dt>preserve</dt><dd>
|
|
The object color and opacity is overlayed normally as per the container
|
|
compositing operation. This is the
|
|
<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>.
|
|
</dd></dl>
|
|
<p>
|
|
For a complex group where the <a href="#knock-out-property"><span class="prop-name">‘knock-out’</span></a> property is
|
|
set to <span class="prop-value">replace</span>, the buffer is created. The initial contents
|
|
of the buffer and whether a secondary opacity channel is created depends on the value of
|
|
the <a href="#enable-background-property"><span class="prop-name">‘enable-background’</span></a> property.
|
|
</p>
|
|
<div class="requirement" id="assert_knockOut">
|
|
A User Agent MUST effect the color and opacity of the objects within the container
|
|
element as specified by the <a href="#knock-out-property"><span class="prop-name">‘knock-out’</span></a> property.
|
|
</div>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
For <span class="prop-value">knock-out: preserve</span>:
|
|
</p>
|
|
<pre><code>
|
|
Dca1' = f(Sca, Sa, Dca1, Da1)
|
|
Da1' = f(Sa, Da1)
|
|
</code></pre>
|
|
<p>
|
|
For <span class="prop-value">knock-out: replace</span> and <span class="prop-value">enable-background: new</span>:
|
|
</p>
|
|
<pre><code>
|
|
Dca1' = f(Sca, Sa, 0, 0)
|
|
Da1' = f(Sa, 0)
|
|
</code></pre>
|
|
<p>
|
|
For <span class="prop-value">knock-out: replace</span> and <span class="prop-value">enable-background: accumulate</span>:
|
|
</p>
|
|
<pre><code>
|
|
Dca1' = f(Sca, Sa, Dca0, Da0)
|
|
Da1' = f(Sa, Da0)
|
|
</code></pre>
|
|
<div class="note">
|
|
An element in a knockout group that does not have the <a href="#clip-to-self-property"><span class="prop-name">‘clip-to-self’</span></a> property
|
|
set, in effect clears all prior elements in the group.
|
|
</div>
|
|
<p>
|
|
<img src="examples/knock-out.png" alt="Image showing 'knock-out' property" width="378" height="243"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/knock-out.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
|
|
<h2 id="containerElementCompositingOperators">5 Container Element Compositing Operators</h2>
|
|
<h3 id="comp-op-property">5.1
|
|
The <span class="prop-name">‘comp-op’</span> property
|
|
</h3>
|
|
<p><em>This section in normative.</em></p>
|
|
<p>
|
|
The <a href="#comp-op-property"><span class="prop-name">‘comp-op’</span></a> property determines the
|
|
compositing operation used when placing elements onto the canvas.
|
|
</p>
|
|
<div class="propdef">
|
|
<dl><dt><span class="propdef-title prop-name">‘comp-op’</span> </dt><dd>
|
|
<table summary="comp-op property" class="propinfo" cellspacing="0" cellpadding="0"><tr valign="baseline"><td>
|
|
<em>Value:</em></td><td>
|
|
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
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Initial:</em></td><td>
|
|
src-over
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Applies to:</em></td><td>
|
|
All elements that render. The host language is responsible for stating which elements render.
|
|
For SVG: container elements and graphics elements
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Inherited:</em></td><td>
|
|
no
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Percentages:</em></td><td>
|
|
N/A
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Media:</em></td><td>
|
|
visual
|
|
</td></tr><tr valign="baseline"><td>
|
|
<em>Animatable:</em></td><td>
|
|
yes
|
|
</td></tr></table>
|
|
</dd></dl>
|
|
</div>
|
|
<p>
|
|
The diagram below shows the sub-pixel regions output by each of the compositing
|
|
operations.
|
|
</p>
|
|
<p>
|
|
<img src="resources/compops.png" alt="Compositing operators - source and destination interaction results"/>
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<div class="requirement" id="assert_CompOp">
|
|
A User Agent MUST effect the color and opacity of the objects within the container
|
|
element as specified by the <a href="#comp-op-property"><span class="prop-name">‘comp-op’</span></a> property.
|
|
</div>
|
|
<p>
|
|
The following operators change pixels where the source is transparent:
|
|
<span class="prop-value">clear</span>,
|
|
<span class="prop-value">src</span>,
|
|
<span class="prop-value">src-in</span>,
|
|
<span class="prop-value">dst-in</span>,
|
|
<span class="prop-value">src-out</span> and
|
|
<span class="prop-value">dst-atop</span>.
|
|
</p>
|
|
<p>
|
|
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
|
|
<span class="prop-value">src-over</span> 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 <span class="prop-value">clear</span> composite the current
|
|
result is set to empty. For <span class="prop-value">src</span>,
|
|
<span class="prop-value">src-out</span> and <span class="prop-value">dst-atop</span>, the bounds are set to
|
|
the source bounds. For <span class="prop-value">dst</span>,
|
|
<span class="prop-value">dst-out</span> and
|
|
<span class="prop-value">src-atop</span>, the bounds are left
|
|
unchanged. For <span class="prop-value">src-in</span> and
|
|
<span class="prop-value">dst-in</span> the bounds are intersected
|
|
with the result.
|
|
</p>
|
|
<table><tr><td class="example">
|
|
<p>
|
|
<img alt="Example of Porter Duff operators" width="412.5" height="400" src="examples/compop-porterduff-examples.png"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/compop-porterduff-examples.svg">View this image as SVG</a>
|
|
</p>
|
|
</td><td class="example">
|
|
<p>
|
|
<img alt="Element of Blend Modes" width="412.5" height="400" src="examples/compop-blend-examples.png"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/compop-blend-examples.svg">View this image as SVG</a>
|
|
</p>
|
|
</td></tr></table>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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.
|
|
</code></pre>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<dl><dt id="comp-op-clear">clear</dt><dd>
|
|
Both the color and the alpha of the destination are cleared. Neither the source
|
|
nor the destination are used as input.
|
|
<pre><code>
|
|
f(Sc,Dc) = 0
|
|
X = 0
|
|
Y = 0
|
|
Z = 0
|
|
|
|
Dca' = 0
|
|
Da' = 0
|
|
</code></pre>
|
|
</dd><dt id="comp-op-src">src</dt><dd>
|
|
The source is copied to the destination. The destination is not used as input.
|
|
<pre><code>
|
|
f(Sc,Dc) = Sc
|
|
X = 1
|
|
Y = 1
|
|
Z = 0
|
|
|
|
Dca' = Sca × Da + Sca × (1 - Da)
|
|
= Sca
|
|
Da' = Sa × Da + Sa × (1 - Da)
|
|
= Sa
|
|
</code></pre>
|
|
</dd><dt id="comp-op-dst">dst</dt><dd>
|
|
The destination is left untouched.
|
|
<pre><code>
|
|
f(Sc,Dc) = Dc
|
|
X = 1
|
|
Y = 0
|
|
Z = 1
|
|
|
|
Dca' = Dca × Sa + Dca × (1 - Sa)
|
|
= Dca
|
|
Da' = Da × Sa + Da × (1 - Sa)
|
|
= Da
|
|
</code></pre>
|
|
</dd><dt id="comp-op-src-over">src-over</dt><dd>
|
|
The source is composited over the destination. This is the
|
|
<a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>.
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows src-over compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/over.png" alt="Image showing src-over compositing" width="378" height="243"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/over.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-dst-over">dst-over</dt><dd>
|
|
The destination is composited over the source and the result replaces the destination.
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
</dd><dt id="comp-op-src-in">src-in</dt><dd>
|
|
The part of the source lying inside of the destination replaces the destination.
|
|
<pre><code>
|
|
f(Sc,Dc) = Sc
|
|
X = 1
|
|
Y = 0
|
|
Z = 0
|
|
|
|
Dca' = Sca × Da
|
|
Da' = Sa × Da
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows src-in compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/in.png" alt="Image showing src-in compositing" width="864" height="270"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/in.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd></dl>
|
|
<dl><dt id="comp-op-dst-in">dst-in</dt><dd>
|
|
The part of the destination lying inside of the source replaces the destination.
|
|
<pre><code>
|
|
f(Sc,Dc) = Dc
|
|
X = 1
|
|
Y = 0
|
|
Z = 0
|
|
|
|
Dca' = Dca × Sa
|
|
Da' = Sa × Da
|
|
</code></pre>
|
|
</dd><dt id="comp-op-src-out">src-out</dt><dd>
|
|
The part of the source lying outside of the destination replaces the destination.
|
|
<pre><code>
|
|
f(Sc,Dc) = 0
|
|
X = 0
|
|
Y = 1
|
|
Z = 0
|
|
|
|
Dca' = Sca × (1 - Da)
|
|
Da' = Sa × (1 - Da)
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows src-out compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/out.png" alt="Image showing src-out compositing" width="540" height="270"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/out.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-dst-out">dst-out</dt><dd>
|
|
The part of the destination lying outside of the source replaces the destination.
|
|
<pre><code>
|
|
f(Sc,Dc) = 0
|
|
X = 0
|
|
Y = 0
|
|
Z = 1
|
|
|
|
Dca' = Dca × (1 - Sa)
|
|
Da' = Da × (1 - Sa)
|
|
</code></pre>
|
|
</dd><dt id="comp-op-src-atop">src-atop</dt><dd>
|
|
The part of the source lying inside of the destination is composited onto the destination.
|
|
<pre><code>
|
|
f(Sc,Dc) = Sc
|
|
X = 1
|
|
Y = 0
|
|
Z = 1
|
|
|
|
Dca' = Sca × Da + Dca × (1 - Sa)
|
|
Da' = Sa × Da + Da × (1 - Sa)
|
|
= Da
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows src-atop compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/atop.png" alt="Image showing src-atop compositing" width="810" height="148"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/atop.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-dst-atop">dst-atop</dt><dd>
|
|
<p>
|
|
The part of the destination lying inside of the source is composited over the source
|
|
and replaces the destination.
|
|
</p>
|
|
<pre><code>
|
|
f(Sc,Dc) = Dc
|
|
X = 1
|
|
Y = 1
|
|
Z = 0
|
|
|
|
Dca' = Dca × Sa + Sca × (1 - Da)
|
|
Da' = Da × Sa + Sa × (1 - Da)
|
|
= Sa
|
|
</code></pre>
|
|
</dd><dt id="comp-op-xor">xor</dt><dd>
|
|
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.
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
</dd></dl>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<dl><dt id="comp-op-plus">plus</dt><dd>
|
|
<p>
|
|
The source is added to the destination and replaces the destination. This operator
|
|
is useful for animating a dissolve between two images.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
</dd><dt id="comp-op-multiply">multiply</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows multiply compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/multiply.png" alt="Image showing multiply compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/multiply.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-screen">screen</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows screen compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/screen.png" alt="Image showing screen compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/screen.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-overlay">overlay</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows overlay compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/overlay.png" alt="Image showing overlay compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/overlay.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-darken">darken</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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()
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows darken compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/darken.png" alt="Image showing darken compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/darken.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-lighten">lighten</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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()
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows lighten compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/lighten.png" alt="Image showing lighten compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/lighten.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd></dl>
|
|
<dl><dt id="comp-op-color-dodge">color-dodge</dt><dd>
|
|
<p>
|
|
The destination color is brightened to reflect the source color.
|
|
Painting with black preserves the original color.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows color-dodge compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/color-dodge.png" alt="Image showing color-dodge compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/color-dodge.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-color-burn">color-burn</dt><dd>
|
|
<p>
|
|
The destination color is darkened to reflect the source color. Painting
|
|
with white preserves the original color.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows color-burn compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/color-burn.png" alt="Image showing color-burn compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/color-burn.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-hard-light">hard-light</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows hard-light compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/hard-light.png" alt="Image showing hard-light compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/hard-light.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-soft-light">soft-light</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows soft-light compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/soft-light.png" alt="Image showing soft-light compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/soft-light.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-difference">difference</dt><dd>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
The following diagram shows difference compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/difference.png" alt="Image showing difference compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/difference.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd><dt id="comp-op-exclusion">exclusion</dt><dd>
|
|
<p>
|
|
The resultant color is similar to that of the
|
|
<span class="prop-value">difference</span> operation. However,
|
|
the <span class="prop-value">exclusion</span> resultant
|
|
color appears as a lower contrast than that of the
|
|
<span class="prop-value">difference</span> resultant color. The
|
|
destination color is inverted when white is used. The
|
|
destination color is preserved when black is used.
|
|
</p>
|
|
<pre><code>
|
|
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
|
|
</code></pre>
|
|
<p>
|
|
These equations are approximations which are under review. Final equations may differ
|
|
from those presented here.
|
|
</p>
|
|
<p>
|
|
The following diagram shows exclusion compositing:
|
|
</p>
|
|
<p>
|
|
<img src="examples/exclusion.png" alt="Image showing exclusion compositing" width="513" height="283"/>
|
|
</p>
|
|
<p>
|
|
<a href="examples/exclusion.svg">View this image as SVG (SVG Compositing enabled browsers only)</a>
|
|
</p>
|
|
</dd></dl>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h2 id="references">6 References</h2>
|
|
<h3 id="normref">6.1 Normative References</h3>
|
|
<dl><dt id="ref-SVG11Full"><strong class="normref">[SVG11]</strong></dt><dd>
|
|
<strong>Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification</strong>, Erik Dahlström, Jon Ferraiolo, 藤沢 淳 (FUJISAWA Jun), Anthony Grasso, Dean Jackson, Chris Lilley, Cameron McCormack, Doug Schepers, Jonathan Watt, Patrick Dengler editors, W3C, 22 June 2010 (Working Draft). See <a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/">http://www.w3.org/TR/2010/WD-SVG11-20100622/</a>
|
|
</dd><dt id="ref-SVG12Tiny"><strong class="normref">[SVGT12]</strong></dt><dd>
|
|
<strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>, Ola Andersson, Robin Berjon, Erik Dahlström, Andrew Emmons, Jon Ferraiolo, Anthony Grasso, Vincent Hardy, Scott Hayman, Dean Jackson, Chris Lilley, Cameron McCormack, Andreas Neumann, Craig Northway, Antoine Quint, Nandini Ramani, Doug Schepers, Andrew Shellshear editors, W3C, 22 December 2008 (Recommendation). See <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/</a>
|
|
</dd></dl>
|
|
|
|
<h3 id="informref">6.2 Informative References</h3>
|
|
<dl><dt id="ref-PorterDuff"><strong class="informref">[PorterDuff]</strong></dt><dd>
|
|
<strong>Compositing Digitial Images</strong>, Thomas Porter and Tom Duff,
|
|
Computer Graphics Volume 18, Number 3, July 1984.
|
|
</dd><dt id="ref-SVGRequirements"><strong class="informref">[SVGReqs]</strong></dt><dd>
|
|
<strong>SVG 1.1/1.2/2.0 Requirements</strong>, Dean Jackson editor, W3C, 22 April
|
|
2002 (Working Draft). See <a href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">
|
|
http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/</a>
|
|
</dd></dl>
|
|
|
|
<h2 id="authors">7 Author List</h2>
|
|
<p>
|
|
The authors of this specification are the participants of the W3C SVG Working Group.
|
|
</p>
|
|
|
|
<h2 id="changes">8 Changes</h2>
|
|
<p>The following changes have been madeto this document since the previous publication:</p>
|
|
<ul>
|
|
<li>Added term Painted Region to document
|
|
</li><li>Added term Group Alpha to document
|
|
</li><li>Added term Group Image to document
|
|
</li><li>Added mark-up to document to link to dentitions
|
|
</li><li>Added mark-up to document to highlight property names and values
|
|
</li><li>Added examples for 'clip-to-self' and 'comp-op' properties
|
|
</li><li>Updated references
|
|
</li><li>Updated wording for clip-to-self to reference Painted Region
|
|
</li><li>Updated wording for enable-background property
|
|
</li><li>Updated wording to clarify how enable-background="new" and enable-background="accumulate" operate
|
|
</li><li>Updated wording for 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-doge', 'color-burn', 'soft-light', 'difference', 'exclusion' blend operations
|
|
</li><li>Updated wording for 'hard-light' blend operation
|
|
</li><li>Updated example sizes to be bigger
|
|
</li><li>Corrected 'soft-light' and 'color-doge' blend equations
|
|
</li><li>Corrected typos in formula throughout document
|
|
</li><li>Converted examples to be purely SVG where possible
|
|
</li>
|
|
</ul>
|
|
|
|
</body></html>
|