3.1 アルファ色合成の構文

この節は規定である。 This section in normative.

Porter-Duff 拡張混色演算を用いた色合成においては色と不透明度が [0 … 1] 区間外の値になり得る。 When compositing using Porter-Duff extended blending operations color and opacity values may fall outside the range zero to one.

4.1 ‘clip-to-self’ プロパティ

この節は規定である。 This section in normative.

‘clip-to-self’ プロパティは、オブジェクトがそれに覆われていない画素にも効果を及ぼし得るかどうかを決定し、 Java2D との互換性を提供する。 【訳者は Java2D との関連がわかっていないのでこの文の正確な意図を把握しきれていない】 The ‘clip-to-self’ property provides compatibility with Java2D by determining if the object effects pixels not covered by the object.

canvas

オブジェクトの色合成は、オブジェクトに覆われていない領域に対しては完全に透明な合成元を合成先上に合成することにより、キャンバスのすべての画素に効果を及ぼし得る。 これが lacuna 値 。 Compositing an object effects all pixels on the canvas by compositing completely transparent source onto the destination for areas not covered by the object. This is the lacuna value.

object

オブジェクトの色合成は、オブジェクトの 塗り領域 によるオブジェクトに覆われている画素にのみ、効果を及ぼし得る。 Compositing an object only effects the pixels covered by the object as by the object's painted region.

‘clip-to-self’ プロパティが object に設定されたグラフィックス要素においては、要素の 塗り領域 の範囲内の画素に対してのみ効果を及ぼす。 ‘clip-to-self’ が object に設定されている所では、色合成演算の際に要素の 塗り領域 からクリッピングパスを作成できる。 要素がキャンバス上に合成される際は生成されたクリッピングパスを通して合成されるので、その要素の範囲外の画素には影響されない。 Graphics elements where the ‘clip-to-self’ property is set to object only effect the pixels within the extent of the element's painted region. A clipping path can be created from an element's painted region when performing a compositing operation where ‘clip-to-self’ is set to object. When the element is composited onto the canvas, it is composited through the generated clipping path and thus pixels outside of the extent of the element remain unmodified.

‘clip-to-self’ プロパティが object に設定されたコンテナ要素においては、 コンテナ要素の範囲内の画素のみに効果が及ぶ。 例えばコンテナ要素に２つの円が含まれていて、コンテナ要素の ‘clip-to-self’ プロパティが object であったならば、２つの円の外側の領域には効果が及ばない。 この演算を実行するためには、 UA はコンテナ要素内のそれぞれの要素の範囲を把握して、それらの要素の範囲のみが変更されるようにする必要がある。 これは各オブジェクトに対し 塗り領域 によるクリッピングパスを作成し、それらのクリッピングパスの和をとり、コンテナ要素内のすべての要素で覆われる画素の範囲を定義するクリッピングパスを生成することにより達成できる。 コンテナ要素がコンテナ要素を入れ子にする所では、結果のクリッピングパスを生成するために、その入れ子にされたコンテナ要素の中でも同じ演算が行われる。 コンテナ要素のキャンバスへの合成は、この結果のクリッピングパスを通して行われるので、コンテナ内の要素の範囲外の画素は影響されない。 Container elements where the ‘clip-to-self’ property is set to object only effect the pixels within the extend of the container element. For example, if a container element contains two circles, and the container element has the ‘clip-to-self’ property is set to object, then region outside the circles is unaffected. To perform this operation, the user agent needs to keep track of the extent of each of the elements within the container element and ensure that only the elements are modified. This can be produced by creating a clipping path from each object's painted region and unioning the clipping paths together to produce a resultant clipping path that defines the extent of the pixels covered by all the elements within the container element. Where a container element contains nested container elements, the operation is performed within the sub-container elements to produce the resultant clipping path. When the container element is composited onto the canvas, it is composited through the resultant clipping path and thus pixels outside of the extent of the elements within the container remain unmodified.

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

いくつかの色合成演算は合成先を除去しない。 これらの演算では ‘clip-to-self’ プロパティは何の効果もない。 合成先を除去する色合成演算は clear, src, src-in, dst-in, src-out, dst-atop である。 これらの演算は色合成演算の図式に示されている中で右側の青色の領域を除去する演算が該当する。 他のすべての演算においては ‘clip-to-self’ プロパティには何の効果もない。 Most compositing operations do not remove the destination and as such for these operations, the ‘clip-to-self’ property has no effect. The compositing operations that remove the destination are clear, src, src-in, dst-in, src-out and dst-atop. These operations are illustrated in the compositing operation diagrams and are the operations that remove the right-hand blue region in diagram. For all other operations the ‘clip-to-self’ property has no effect.

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

‘clip-to-self’ プロパティが canvas に設定されている一部のコンテナ要素に対しては、その境界の外側の背景にも効果を及ぼし得る。 For some container elements where the ‘clip-to-self’ property is set to canvas, the container element might effect the background outside bounds of the container element.

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

4.2 ‘enable-background’ プロパティ

この節は規定である。 This section in normative.

‘enable-background’ プロパティはグループの色合成におけるグループ画像キャンバスがどのように初期化, 管理されるかを制御する。 The ‘enable-background’ property controls how the group image canvas for group compositing is initialized and managed.

new

グループ画像 バッファは黒地透明に初期化されて確立される。 現在の要素のすべての子は新たな グループ画像 の中に描画されるものとする。 A group image buffer is established which is initialized to transparent black. All children of the current element shall be rendered into the new group image.

オプションの <x>, <y>, <width>, <height> パラメータは、利用空間においてオブジェクトが合成されるコンテナ要素の部分領域を指示する。 これらのパラメータは グループ画像 キャンバスのクリッピング矩形として働き、 SVG UA が要する一時画像バッファもコンテナ要素の実際の境界より小さくなり得る。 <x>, <y>, <width>, <height> のいずれかが指定されていない、あるいは <width>, <height> のいずれかに 1 より小さい値が指定されていた場合、オブジェクトは ‘enable-background’ プロパティが accumulate に設定されていたかのように合成される。 The optional <x>, <y>, <width> and <height> parameters indicate in user space, the subregion of the container element where objects are composited onto. These parameters act as a clipping rectangle on the group image canvas enabling the SVG usage agent to potentially allocate a smaller temporary image buffer than the effective bounds of the container element. If not all the <x>, <y>, <width> and <height> values are specified, or if either <width> or <height> are specified as a value less than 1, then the objects are composited as if the ‘enable-background’ property was set to accumulate.

プロパティ値 new に対するオプションの値は検討中にある。 The optional values for the new property is under consideration

accumulate

グループ画像 バッファは現在のキャンバスの対応する領域の複製に初期化されて確立される。 加えて、 グループアルファ バッファは不透明に初期化されて確立される。 グループアルファ は グループ画像 内で背景が占める割合を格納するために利用される。 現在の要素のすべての子は グループ画像 の中へ描画されるものとする。 これが lacuna 値 。 A group image buffer is established which is initialized with corresponding area of the current canvas copied into it. Additionally, a group alpha buffer is established which is initialized to be opaque. The group alpha is used to store the percentage of background in the group image. All children of the current element shall be rendered into the group image. This is the lacuna value.

‘enable-background’ が new に設定されたコンテナ要素に対しては、 そのコンテナ要素の グループ画像 バッファは透明に初期化される。 この グループ画像 はコンテナの子に対するキャンバスとして扱われる。 コンテナ要素の完全な内容が グループ画像 上に描画される際、バッファはコンテナ要素に指定された色合成演算を用いて キャンバス に合成される。 For a container element with ‘enable-background’ set to new, the container element's group image buffer is initially cleared to transparent. This group image is treated as the canvas for the containers's children. When the complete contents of the container element are rendered onto the group image, the buffer is composited onto the canvas using the container element's specified compositing operation.

‘enable-background’ が accumulate のコンテナ要素に対しては、 キャンバス の対応する領域がコンテナ要素の グループ画像 バッファの中へ複製される。 不透明度チャンネルのみを持つ グループアルファ バッファも作成される。 このバッファ Da(d) は グループ画像 内の背景が占める割合を格納し、初期状態は不透明である。 グループ画像 は通常通りグループの子に対するキャンバスとして扱われる。 加えて、オブジェクトが グループ画像, の中に置かれるのに伴い、それらは下に挙げる演算のいずれかを用いて Da(d) グループアルファ バッファにも置かれる。 コンテナ要素のすべての子が グループ画像 に合成された後、 グループ画像 は以下の段階を踏んで キャンバス に合併される。 For a container element with ‘enable-background’ set to accumulate, the corresponding area of the canvas is copied into the container element's group image buffer. A group alpha buffer which has only an opacity channel is also created. This buffer Da(d) stores the percentage of the background in the group image and is initially opaque. The group image is treated as the canvas for the children of the group as usual. Additionally, as objects are placed into the group image, they are also placed into the Da(d) group alpha buffer using one of the operations listed below. When all the children of the container element have been composited in to the group image the following steps are performed to merge the group image with the canvas.

1. グループ画像 色から キャンバス 色が除去される。 The canvas color is removed from the group image color.
2. キャンバス から除去する必要がある背景の量を表現するため、 グループアルファ バッファが反転される。 The group alpha buffer is inverted to represent the amount of background that needs to be removed from the canvas.
3. グループ ‘opacity’ などの、すべての後処理描画効果が グループ画像 と グループアルファ バッファにそれぞれ適用される。 どの後処理描画効果も指定されていない場合、この段階は省略される。 Any post rendering effects such as group ‘opacity’ are applied to the group image and group alpha buffers respectively. If no post rendering effects are specified then this step can be ignored.
4. グループ画像 は src-over 演算子と グループアルファ のデータを用いて キャンバス 背景と合成される。 キャンバス から正確な量のアルファが除去されるようにするため、 グループアルファ が src-over 演算の制御に利用される。 The group image is composited with the canvas background using the src-over operator and the group alpha data. The group alpha is used to control the the src-over operation such that the correct amount of alpha is removed from the canvas.

‘enable-background’ が accumulate のコンテナ要素に対しては、 グループ画像 を背景（ キャンバス ）上に置くために用いられる色合成演算が変更される。 この演算はオブジェクトにより生じる背景に対するどの reduction にも適用される。 For container elements with an ‘enable-background’ set to accumulate, the compositing operation used to place the group image onto the background (canvas) is modified. The operation will apply any reduction to the background caused by the objects.

‘enable-background’ が accumulate のコンテナ要素内の要素が描かれる際は、下に示す標準的な等式がオブジェクトを グループ画像 の中に描く際に用いられる。 色合成演算に依存して下の２つの演算のいずれかが、オブジェクトを追加の グループアルファ バッファ Da(d) の中に描く際に用いられる。 When drawing elements within a container element with ‘enable-background’ set to accumulate, the standard equations as listed below are used to draw the object into the group image. Depending on the compositing operation, one of two operations listed below are used to draw the object into the extra group alpha buffer Da(d).

演算 clear, src, src-in, dst-in, src-out, dst-atop に対しては： For the operations clear, src, src-in, dst-in, src-out and dst-atop:

  Da(d)' = 0

他のすべての色合成演算に対しては： For all other compositing operations:

  Da(d)' = Da(d) × (1 - Sa)

一旦、コンテナ要素の内容がコンテナ要素の グループ画像 バッファに描画されれば、 ‘opacity’ や ‘filter’ 効果などの演算がバッファに適用される前に、以下の演算を用いて残りの背景 (キャンバス) がコンテナ要素のバッファから除去される： Once the contents of a container element are rendered into the container element's group image buffer and before operations such as ‘opacity’ or ‘filter’ effects are applied to the buffer, the remaining background (canvas) is removed from the container element's buffer using the following operations:

  Dca1'   = Dca1 - Dca0 × Da1(d)
  Da1'    = Da1 - Da0 × Da1(d)

この時点で Da1(d) は反転されるべきである。 反転された Da1(d) はコンテナ要素を背景に置く際に背景から除去される量を表現する。 At this point Da1(d) should be inverted. The inverted Da1(d) represents the amount of data to be removed from the background when placing the container element onto the background.

  Da1(d)' = 1 - Da1(d)

次に行われる演算は ‘opacity’ や ‘filter’ 効果をコンテナ要素のバッファに適用するものである。 この段階において Da1 に対して行われる（いくつかの）演算は、 Da1(d) に対しても行われるべきものになる。 The next operation to perform is the application of ‘opacity’ or ‘filter’ effects to the container element's buffer. During this step, the operation(s) performed on Da1 should also be performed on Da1(d).

コンテナ要素の グループ画像 バッファを背景上に合成する際は、上に挙げた標準的な色合成演算ではなく、次の演算が用いられるべきである： When compositing the container element's group image buffer onto the background, rather than the standard compositing operation listed above, the following operations should be used:

  Dca0' = f(Dc1,Dc0) × Da1 × Da0 + Y × Dca1 × (1-Da0) + Z × Dca0 × (1-Da1(d))
  Da0'  =          X × Da1 × Da0 + Y × Da1 × (1-Da0)  + Z × Da0 × (1-Da1(d))

フィルタは BackgroundImage と BackgroundAlpha 画像を通して最も近い祖先のグループのバッファにアクセスする。 フィルタを参照する要素の祖先のグループ要素に対し作成されたバッファがフィルタに渡される。 フィルタを参照する要素の祖先に ‘enable-background’ プロパティの値が new を持つものが存在しなければ、黒地透明がフィルタの入力に渡される。 Filters have access to the nearest ancestor group's buffer through the BackgroundImage and BackgroundAlpha images. The buffer created for the ancestor group element of the element referencing the filter, is passed to the filter. Where no ancestors of the element referencing the filter containing an ‘enable-background’ property value of new, transparent black is passed as input to the filter.

コンテナ要素はバッファの生成を要するものとして定義されてはいるが、種々の最適化により UA がこのバッファの生成を選択しない場合も多々ある。 例えば、単体のオブジェクトからなるグループは、一度もバッファに描画することなく、直接背景に描画し得る場合もある。 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.

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

4.3 ‘knock-out’ プロパティ

この節は規定である。 This section in normative.

‘knock-out’ プロパティは、オブジェクトの色と不透明度がコンテナ内で重なり合うオブジェクトの色と不透明度を置換するかどうかを決定する。 The ‘knock-out’ property determines if the color and opacity of an object replaces the color and opacity of objects it overlaps in the container.

replace

オブジェクトの色と不透明度はコンテナ要素内の他のオブジェクトの色と不透明度を置換する。 The object color and opacity replaces that of other objects within the container element.

preserve

オブジェクトの色と不透明度は通常通りコンテナの色合成演算ごとに overlay される。 これが lacuna 値 。 The object color and opacity is overlayed normally as per the container compositing operation. This is the lacuna value.

‘knock-out’ プロパティが replace の複合グループに対しては、バッファが作成される。 バッファの初期内容、および、追加の不透明度チャンネルが作成されるかどうかは ‘enable-background’ プロパティの値に依存する。 For a complex group where the ‘knock-out’ property is set to replace, the buffer is created. The initial contents of the buffer and whether a secondary opacity channel is created depends on the value of the ‘enable-background’ property.

コンテナ要素内のそれぞれのオブジェクトに対し、オブジェクトの色と不透明度は overlay するのではなく、他のオブジェクトの色と不透明度を置換する。 実際には、複合グループの子の色合成演算に対する合成先入力は、その複合グループに対する現在のバッファではなく、バッファの元の内容になる。 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.

knock-out: preserve の場合： For knock-out: preserve:

  Dca1' = f(Sca, Sa, Dca1, Da1)
  Da1' = f(Sa, Da1)

knock-out: replace かつ enable-background: new の場合： For knock-out: replace and enable-background: new:

  Dca1' = f(Sca, Sa, 0, 0)
  Da1' = f(Sa, 0)

knock-out: replace かつ enable-background: accumulate の場合： For knock-out: replace and enable-background: accumulate:

  Dca1' = f(Sca, Sa, Dca0, Da0)
  Da1' = f(Sa, Da0)

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

5.1 ‘comp-op’ プロパティ

この節は規定である。 This section in normative.

‘comp-op’ プロパティは要素をキャンバス上に置く際に利用される色合成演算を決定する。 The ‘comp-op’ property determines the compositing operation used when placing elements onto the canvas.

下の図式に各色合成演算に対する画素の部分領域ごとの出力を示す。 The diagram below shows the sub-pixel regions output by each of the compositing operations.

前節で述べられたように、親のコンテナ要素の境界は必要なメモリ量したがって画素の書き込み量も節減するように最適化し得る。 コンテナ要素の境界が一度定まれば、各要素はこれらの境界内の画素にのみ効果が及ぶ。 As discussed in the previous section, the bounds of the parent container element can be optimized to save in memory usage and hence, pixel writing requirements. Once the bounds of the parent container element have been determined, each element can only affect the pixels within those bounds.

次の演算子は合成元が透明な所においても画素を変更する： clear, src, src-in, dst-in, src-out, dst-atop The following operators change pixels where the source is transparent: clear, src, src-in, dst-in, src-out and dst-atop.

UA はコンテナ要素を生成するための予備バッファを作成する必要が生じ得る。 既定の色合成演算子 src-over を用いるコンテナ要素に対する予備バッファの大きさは単純にコンテナ要素内の要素の境界の和になる。 他の色合成演算子が用いられた場合、コンテナ要素の境界は上の色合成演算子の図式から決定される。 境界は空の状態から開始され、色合成演算子は、コンテナ要素内の連続するオブジェクトのそれぞれの境界が、結果を置換するか, 結果との和をとるか, 結果との共通部分をとるかを指定する。 多くの色合成演算子では、境界は結果との和がとられる。 clear 色合成においては、現在の結果が空に設定される。 src, src-out, dst-atop, においては、境界は合成元の境界に設定される。 dst, dst-out, src-atop, においては、境界はそのままにされる。 src-in, dst-in においては、境界は結果との共通部分がとられる。 The user agent may be required to create a backing store in which to generate a container element. The size of the backing store for a container element using the default compositing operator src-over is simply the union of the bounds of the sub-elements of the container element. When other compositing operators are used, the bounds of the container element are determined using the compositing operator diagram above. Starting with an empty bounds, the compositing operator specifies that the bounds of each successive object within the container element either replaces the result or is unioned with the result or is intersected with the result. For most compositing operators the bounds are unioned with the result. For the clear composite the current result is set to empty. For src, src-out and dst-atop, the bounds are set to the source bounds. For dst, dst-out and src-atop, the bounds are left unchanged. For src-in and dst-in the bounds are intersected with the result.

この画像を SVG で見る

この画像を SVG で見る

下に挙げる色成分はすべて対応するアルファ値により積算済みの色成分情報を指す。 等式内に現れる下の識別子はそれぞれ識別子に後続して記されている意味を持つ。 All color components listed below refer to color component information premultiplied by the corresponding alpha value. The following identifiers have the attached meaning in the equations following on from the identifiers.

  Sc  - 合成元要素の色値
  Sa  - 合成元要素のアルファ値
  Dc  - 色合成前のキャンバスの色値
  Da  - 色合成前のキャンバスのアルファ値
  Dc' - 色合成後のキャンバスの色値
  Da' - 色合成後のキャンバスのアルファ値

  Sc  - The source element color value.
  Sa  - The source element alpha value.
  Dc  - The canvas color value prior to compositing.
  Da  - The canvas alpha value prior to compositing.
  Dc' - The canvas color value post compositing.
  Da' - The canvas alpha value post compositing.

キャンバスは色成分とオプションのアルファ成分を含む。 キャンバス上に新たな要素が置かれる際のキャンバス上の結果の画素値は以下の公式を用いて算出される。 The canvas contains color components and an optional alpha component. When placing new elements onto the canvas, the resulting pixel values on the canvas are calculated using the following equations.

clear

合成先の色とアルファはいずれもクリアされる。 合成元および合成先のいずれも入力に利用されない。 Both the color and the alpha of the destination are cleared. Neither the source nor the destination are used as input.

f(Sc,Dc) = 0
X        = 0
Y        = 0
Z        = 0

Dca' = 0
Da'  = 0
    

src

合成元が合成先に複製される。 合成先は入力に利用されない。 The source is copied to the destination. The destination is not used as input.

f(Sc,Dc) = Sc
X        = 1
Y        = 1
Z        = 0

Dca' = Sca × Da + Sca × (1 - Da)
   = Sca
Da'  = Sa × Da + Sa × (1 - Da)
   = Sa
   

dst

合成先には何も手は加えられない。 The destination is left untouched.

f(Sc,Dc) = Dc
X        = 1
Y        = 0
Z        = 1

Dca' = Dca × Sa + Dca × (1 - Sa)
   = Dca
Da'  = Da × Sa + Da × (1 - Sa)
   = Da
   

src-over

合成元は合成先上に合成される。 これが lacuna 値 。 The source is composited over the destination. This is the lacuna value.

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
    

次の図式に src-over 色合成を示す： The following diagram shows src-over compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

dst-over

合成先は合成元上に合成され、その結果が合成先を置換する。 The destination is composited over the source and the result replaces the destination.

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
    

src-in

合成元のうち合成先の内側に入る部分が合成先を置換する。 The part of the source lying inside of the destination replaces the destination.

f(Sc,Dc) = Sc
X        = 1
Y        = 0
Z        = 0

Dca' = Sca × Da
Da'  = Sa × Da
    

次の図式に src-in 色合成を示す： The following diagram shows src-in compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

dst-in

合成先のうち合成元の内側に入る部分が合成先を置換する。 The part of the destination lying inside of the source replaces the destination.

f(Sc,Dc) = Dc
X        = 1
Y        = 0
Z        = 0

Dca' = Dca × Sa
Da'  = Sa × Da
    

src-out

合成元のうち合成先の外側に出る部分が合成先を置換する。 The part of the source lying outside of the destination replaces the destination.

f(Sc,Dc) = 0
X        = 0
Y        = 1
Z        = 0

Dca' = Sca × (1 - Da)
Da'  = Sa × (1 - Da)
    

次の図式に src-out 色合成を示す： The following diagram shows src-out compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

dst-out

合成先のうち合成元の外側に出る部分が合成先を置換する。 The part of the destination lying outside of the source replaces the destination.

f(Sc,Dc) = 0
X        = 0
Y        = 0
Z        = 1

Dca' = Dca × (1 - Sa) 
Da'  = Da × (1 - Sa)
    

src-atop

合成元のうち合成先の内側に入る部分が合成先上に合成される。 The part of the source lying inside of the destination is composited onto the destination.

f(Sc,Dc) = Sc
X        = 1
Y        = 0
Z        = 1

Dca' = Sca × Da + Dca × (1 - Sa)
Da'  = Sa × Da + Da × (1 - Sa)
   = Da
    

次の図式に src-atop 色合成を示す： The following diagram shows src-atop compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

dst-atop

合成先のうち合成元の内側に入る部分が合成元上に合成され、合成先を置換する。 The part of the destination lying inside of the source is composited over the source and replaces the destination.

f(Sc,Dc) = Dc
X        = 1
Y        = 1
Z        = 0

Dca' = Dca × Sa + Sca × (1 - Da)
Da'  = Da × Sa + Sa × (1 - Da)
   = Sa
    

xor

合成元のうち合成先の外側に出る部分と合成先のうち合成元の外側に出る部分とが結合される。 The part of the source that lies outside of the destination is combined with the part of the destination that lies outside of the source.

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
    

12 の基本的な Porter-Duff 演算子に加えて、次の色合成演算による合成元と合成先の混色が追加される。 これらの演算子は色合成後の出力値の切り詰めを要する。 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.

plus

合成元は合成先に加えられ、合成先を置換する。 この演算子は２つの画像間におけるディゾルブアニメーションに有用である。 【dissolve - ディザ合成】 The source is added to the destination and replaces the destination. This operator is useful for animating a dissolve between two images.

f(Sc,Dc) = Sc + Dc
X        = 1
Y        = 1
Z        = 1

Dca' = Sca × Da + Dca × Sa + Sca × (1 - Da) + Dca × (1 - Sa)
   = Sca + Dca
Da'  = Sa × Da + Da × Sa + Sa × (1 - Da) + Da × (1 - Sa)
   = Sa + Da
   

multiply

合成元の色に合成先の色による積がとられ、合成先を置換する。 結果の色の明度は常に合成元または合成先以下になる。 どの色でも黒との積による結果は黒になる。 どの色でも白との積による結果は元の色と同じになる。 The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.

f(Sc,Dc) = Sc × Dc
X        = 1
Y        = 1
Z        = 1

Dca' = Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
Da'  = Sa × Da + Sa × (1 - Da) + Da × (1 - Sa)
   = Sa + Da - Sa × Da
    

次の図式に multiply 色合成を示す： The following diagram shows multiply compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

screen

合成元の色と合成先の色は補色がとられてから積がとられ、結果の色が合成先を置換する。 結果の色の明度は常に合成元または合成先の色以上になる。 どの色でも白とのスクリーンによる結果は白になる。 どの色でも黒とのスクリーンによる結果は元の色と同じになる。 The source and destination colors are complemented, multiplied and the resultant color replaces the destination. The resultant color is always at least as light as either the source or destination colour. Screening any color with white results in white. Screening any color with black preserves the original color.

f(Sc,Dc) = Sc + Dc - (Sc × Dc)

X        = 1
Y        = 1
Z        = 1

Dca' = (Sca × Da + Dca × Sa - Sca × Dca) + Sca × (1 - Da) + Dca × (1 - Sa)
   = Sca + Dca - Sca × Dca
Da'  = Sa + Da - Sa × Da
    

次の図式に screen 色合成を示す： The following diagram shows screen compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

overlay

合成先の色により結果の色が積になるかスクリーンになるかどうかが決定される。 合成元の色がそのハイライトとシャドウを維持しつつ合成先を overlay する。 合成先の色はその明るさまたは暗さを反映させるように合成元の色と混ぜられる。 The destination color is used to determine if the resultant is either a multiplication or screening of the colors. Source colors overlay the destination whilst preserving its highlights and shadows. The destination color is mixed with the source color to reflect the destination lightness or darkness.

if 2 × Dc <= 1
f(Sc,Dc) = 2 × Sc × Dc
otherwise
f(Sc,Dc) = 1 - 2 × (1 - Dc) × (1 - Sc)
X        = 1
Y        = 1
Z        = 1

if 2 × Dca <= Da
Dca' = 2 × Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise
Dca' = Sa × Da - 2 × (Da - Dca) × (Sa - Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
     = Sca × (1 + Da) + Dca × (1 + Sa) - 2 × Dca × Sca - Da × Sa

Da' = Sa + Da - Sa × Da
    

次の図式に overlay 色合成を示す： The following diagram shows overlay compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

darken

結果の色は合成元または合成先の色より暗くなる。 合成元がより暗い場合、合成先を置換する。 そうでない場合、合成先が保持される。 The resultant color is the darker of source or destination colors. If the source is darker, it replaces the destination. Otherwise, the destination is preserved.

f(Sc,Dc) = min(Sc,Dc)
X        = 1
Y        = 1
Z        = 1

Dca' = min(Sca × Da, Dca × Sa) + Sca × (1 - Da) + Dca × (1 - Sa)
Da'  = Sa + Da - Sa × Da 

or 
 
if Sca × Da < Dca × Sa
src-over()
otherwise
dst-over()
    

次の図式に darken 色合成を示す： The following diagram shows darken compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

lighten

結果の色は合成元または合成先の色より明るくなる。 合成元がより明るくなる場合、合成先を置換する。 そうでない場合、合成先が保持される。 The resultant color is the lighter of source or destination colors. If the source is lighter, it replaces the destination. Otherwise, the destination is preserved.

f(Sc,Dc) = max(Sc,Dc)
X        = 1
Y        = 1
Z        = 1

Dca' = max(Sca × Da, Dca × Sa) + Sca × (1 - Da) + Dca × (1 - Sa)
Da'  = Sa + Da - Sa × Da 

or 

if Sca × Da > Dca × Sa
src-over()
otherwise
dst-over()
    

次の図式に lighten 色合成を示す： The following diagram shows lighten compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

color-dodge

合成先の色の輝度が合成元の色を反映させるように高くなる。 黒による塗りは元の色をそのまま残す。 【dodge - 覆い焼き】 The destination color is brightened to reflect the source color. Painting with black preserves the original color.

if Sc == 1
f(Sc,Dc) = 1
otherwise
f(Sc,Dc) = min(1, Dc/(1 - Sc))
X        = 1
Y        = 1
Z        = 1

if Sca == Sa and Dca == 0
Dca' = Sca × (1 - Da) + Dca × (1 - Sa)
     = Sca × (1 - Da)
otherwise if Sca == Sa
Dca' = Sa × Da + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise if Sca < Sa
Dca' = Sa × Da × min(1, Dca/Da × Sa/(Sa - Sca)) + Sca × (1 - Da) + Dca × (1 - Sa)

Da'  = Sa + Da - Sa × Da
    

次の図式に color-dodge 色合成を示す： The following diagram shows color-dodge compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

color-burn

合成先の色は合成元の色を反映させるように暗くされる。 白による塗りは元の色をそのまま残す。 【burn - 焼き込み】 The destination color is darkened to reflect the source color. Painting with white preserves the original color.

if Sc == 0
f(Sc,Dc) = 0
otherwise
f(Sc,Dc) = 1 - min(1, (1 - Dc)/Sc)
X        = 1
Y        = 1
Z        = 1

if Sca == 0 and Dca == Da
Dca' = Sa × Da + Sca × (1 - Da) + Dca × (1 - Sa)
     = Sa × Da + Dca × (1 - Sa)
otherwise if Sca == 0
Dca' = Sca × (1 - Da) + Dca × (1 - Sa)
     = Dca × (1 - Sa)
otherwise if Sca > 0
Dca' = Sa × Da - Sa × Da × min(1, (1 - Dca/Da) × Sa/Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
     = Sa × Da × (1 - min(1, (1 - Dca/Da) × Sa/Sca)) + Sca × (1 - Da) + Dca × (1 - Sa)

Da'  = Sa + Da - Sa × Da
    

次の図式に color-burn 色合成を示す： The following diagram shows color-burn compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

hard-light

合成元の色が結果の色が積になるかスクリーンになるかどうかを定める。 合成元の色が 0.5 より明るい場合、合成先はスクリーンがとられたかの様に明るくされる。 合成元の色が 0.5 より暗い場合、合成先は積がとられたかの様に暗くされる。 明るく／暗くされる度合いは合成元の色と 0.5 の差分に比例する。
0.5 に等しい場合、合成先は変化しない。 白／黒による塗りの結果はそれぞれ白／黒になる。 The source color is used to determine if the resultant is either a multiplication or screening of the colors. If the source color is lighter than 0.5, the destination is lightened as if it were screened. If the source color is darker than 0.5, the destination is darkened, as if it were multiplied. The degree of lightening or darkening is proportional to the difference between the source color and 0.5. If it is equal to 0.5 the destination is unchanged. Painting with pure black or white produces black or white.

if 2 × Sc <= 1
f(Sc,Dc) = 2 × Sc × Dc
otherwise
f(Sc,Dc) = 1 - 2 × (1 - Dc) × (1 - Sc)
X        = 1
Y        = 1
Z        = 1


if 2 × Sca <= Sa
Dca' = 2 × Sca × Dca + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise
Dca' = Sa × Da - 2 × (Da - Dca) × (Sa - Sca) + Sca × (1 - Da) + Dca × (1 - Sa)
     = Sca × (1 + Da) + Dca × (1 + Sa) - Sa × Da - 2 × Sca × Dca

Da'  = Sa + Da - Sa × Da
    

次の図式に hard-light 色合成を示す： The following diagram shows hard-light compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

soft-light

合成元の色により結果の色は明るくされるか暗くされる。 合成元の色が 0.5 より明るい場合、合成先は明るくされる。 合成元の色が 0.5 より暗い場合、合成先は焼き込まれたかの様に（ burned in ）暗くされる。 明るく／暗くされる度合いは合成元の色と 0.5 の差分に比例する。 0.5 に等しい場合、合成先は変化しない。 白／黒による塗りの結果は明るくされた領域と暗くされた領域を明瞭に示すが、白／黒にはならない。 The source colour is used to determine if the resultant color is darkened or lightened. If the source color is lighter than 0.5, the destination is lightened. If the source color is darker than 0.5, the destination is darkened, as if it were burned in. The degree of darkening or lightening is proportional to the difference between the source color and 0.5. If it is equal to 0.5, the destination is unchanged. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.

if 2 × Sc <= 1
f(Sc,Dc) = Dc - (1 - 2 × Sc) × Dc × (1 - Dc)
otherwise if 2 × Sc > 1 and 4 × Dc <= 1
f(Sc,Dc) = Dc + (2 × Sc - 1) × (4 × Dc × (4 × Dc + 1) × (Dc - 1) + 7 × Dc)
otherwise if 2 × Sc > 1 and 4 × Dc > 1
f(Sc,Dc) = Dc + (2 × Sc - 1) × ((Dc)^0.5 - Dc)
X        = 1
Y        = 1
Z        = 1

if 2 × Sca <= Sa
Dca' = Dca × (Sa + (2 × Sca - Sa) × (1 - m)) + Sca × (1 - Da) + Dca × (1 - Sa)
otherwise if 2 × Sca > Sa and 4 × Dca <= Da
Dca' = Dca × Sa + Da × (2 × Sca - Sa) × (4 × m × (4 × m + 1) × (m - 1) + 7 × m) + Sca × (1 - Da) + Dca × (1 - Sa)
     = Da × (2 × Sca - Sa) × (16 × m^3 - 12 × m^2 - 3 × m) + Sca - Sca × Da + Dca
otherwise if 2 × Sca > Sa and 4 × Dca > Da
Dca' = Dca × Sa + Da × (2 × Sca - Sa) × (m^0.5 - m) + Sca × (1 - Da) + Dca × (1 - Sa)
     = Da × (2 × Sca - Sa) × (m^0.5 - m) + Sca - Sca × Da + Dca

Da'  = Sa + Da - Sa × Da

Where:
  m = Dca/Da
    

次の図式に soft-light 色合成を示す： The following diagram shows soft-light compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

difference

結果の色は合成元と合成先の色の差分の絶対値になる。 白が用いられた場合、合成先の色は反転される。 黒が用いられた場合、合成先の色がそのまま残る。 The resultant color is the absolute difference between the source and destination colors. The destination color is inverted when white is used. The destination color is preserved when black is used.

f(Sc,Dc) = abs(Dc - Sc)
X        = 1
Y        = 1
Z        = 1

Dca' = abs(Dca × Sa - Sca × Da) + Sca × (1 - Da) + Dca × (1 - Sa)
   = Sca + Dca - 2 × min(Sca × Da, Dca × Sa)
Da'  = Sa + Da - Sa × Da
    

次の図式に difference 色合成を示す： The following diagram shows difference compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

exclusion

結果の色は difference 演算のそれと似たものになる。 しかしながら、 exclusion による結果の色のコントラストは difference による結果の色のコントラストよりも小さめになる。 白が用いられた場合、合成先の色は反転される。 黒が用いられた場合、合成先の色はそのまま残る。 The resultant color is similar to that of the difference operation. However, the exclusion resultant color appears as a lower contrast than that of the difference resultant color. The destination color is inverted when white is used. The destination color is preserved when black is used.

f(Sc,Dc) = Sc + Dc - 2 × Sc × Dc
X        = 1
Y        = 1
Z        = 1

Dca' = (Sca × Da + Dca × Sa - 2 × Sca × Dca) + Sca × (1 - Da) + Dca × (1 - Sa)
Da'  = Sa + Da - Sa × Da
    

これらの等式は検討中の近似式である。 最終的な等式はここに示されたものと異なるものになる可能性がある。 These equations are approximations which are under review. Final equations may differ from those presented here.

次の図式に exclusion 色合成を示す： The following diagram shows exclusion compositing:

この画像を SVG で見る（ SVG 色合成可能なブラウザのみ）

上に挙げられた演算子の多くでは、画像の合成元が完全に透明な領域においても合成先が変化する。 合成元が触れない画素は透明と見なされるので、色合成演算によっては変化し得ることになる。 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.

6.1 規範とする文献

[SVG11]

Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification, 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 http://www.w3.org/TR/2010/WD-SVG11-20100622/

【日本語訳】SVG 1.1 仕様（第２版）

[SVGT12]

Scalable Vector Graphics (SVG) Tiny 1.2 Specification, 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 http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/

【日本語訳】SVG Tiny 1.2 仕様

6.2 参考文献

[PorterDuff]

Compositing Digitial Images, Thomas Porter and Tom Duff, Computer Graphics Volume 18, Number 3, July 1984.

[SVGReqs]

SVG 1.1/1.2/2.0 Requirements, Dean Jackson editor, W3C, 22 April 2002 (Working Draft). See http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/