index.html 78.9 KB

Raw Blame History Permalink

<!--
  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 &lt;<a href="mailto:anthony.grasso@cisra.canon.com.au">anthony.grasso@cisra.canon.com.au</a>&gt;</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&lt;n&gt;</dt><dd>Destination buffer &lt;n&gt; 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 [ &lt;x&gt; &lt;y&gt;
                &lt;width&gt; &lt;height&gt; ] | 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">&lt;x&gt;</span>,
          <span class="prop-value">&lt;y&gt;</span>,
          <span class="prop-value">&lt;width&gt;</span> and
          <span class="prop-value">&lt;height&gt;</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">&lt;x&gt;</span>,
          <span class="prop-value">&lt;y&gt;</span>,
          <span class="prop-value">&lt;width&gt;</span> and
          <span class="prop-value">&lt;height&gt;</span> values are specified, or
          if either <span class="prop-value">&lt;width&gt;</span> or
          <span class="prop-value">&lt;height&gt;</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 &lt;width&gt; or &lt;height&gt; 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 &lt;= 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 &lt;= 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 &lt; 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 &gt; 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 &lt; 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 &gt; 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 &lt;= 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 &lt;= 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 &lt;= 1
  f(Sc,Dc) = Dc - (1 - 2 × Sc) × Dc × (1 - Dc)
otherwise if 2 × Sc &gt; 1 and 4 × Dc &lt;= 1
  f(Sc,Dc) = Dc + (2 × Sc - 1) × (4 × Dc × (4 × Dc + 1) × (Dc - 1) + 7 × Dc)
otherwise if 2 × Sc &gt; 1 and 4 × Dc &gt; 1
  f(Sc,Dc) = Dc + (2 × Sc - 1) × ((Dc)^0.5 - Dc)
X        = 1
Y        = 1
Z        = 1

if 2 × Sca &lt;= Sa
  Dca' = Dca × (Sa + (2 × Sca - Sa) × (1 - m)) + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise if 2 × Sca &gt; Sa and 4 × Dca &lt;= 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 &gt; Sa and 4 × Dca &gt; 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>