W3cubDocs

/SVG

<feComposite>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨October 2018⁩.

The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter, or arithmetic.

Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.

The table below shows each of these operations using an image of the MDN logo composited with a red circle:

Operation	Description
over	The source graphic defined by the `in` attribute (the MDN logo) is placed over the destination graphic defined by the `in2` attribute (the circle). This is the default operation, which will be used if no operation or an unsupported operation is specified.
in	The parts of the source graphic defined by the `in` attribute that overlap the destination graphic defined in the `in2` attribute, replace the destination graphic.
out	The parts of the source graphic defined by the `in` attribute that fall outside the destination graphic defined in the `in2` attribute, are displayed.
atop	The parts of the source graphic defined in the `in` attribute, which overlap the destination graphic defined in the `in2` attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.
xor	The non-overlapping regions of the source graphic defined in the `in` attribute and the destination graphic defined in the `in2` attribute are combined.
lighter	The sum of the source graphic defined in the `in` attribute and the destination graphic defined in the `in2` attribute is displayed.
arithmetic	The `arithmetic` operation is useful for combining the output from the `<feDiffuseLighting>` and `<feSpecularLighting>` filters with texture data. If the `arithmetic` operation is chosen, each result pixel is computed using the following formula: result = k1i1i2 + k2i1 + k3i2 + k4 where: `i1` and `i2` indicate the corresponding pixel channel values of the input image, which map to `in` and `in2` respectively `k1`, `k2`, `k3`, and `k4` indicate the values of the attributes with the same name.

Usage context

Categories	Filter primitive element
Permitted content	Any number of the following elements, in any order: `<animate>`, `<discard>`, `<set>`

Attributes

in: First input for the given filter primitive.
in2: Second input for the given filter primitive (works the same as the in attribute).
operator: over | in | out | atop | xor | lighter | arithmetic
k1, k2, k3, k4: Values used for calculating the result pixel in arithmetic operator filter primitives.

DOM Interface

This element implements the SVGFECompositeElement interface.

Example

This example defines filters for each of the supported operations (over, atop, lighter, etc.), which composite an input SourceGraphic with an image of the MDN logo. The filters are each applied to a circle element, which is then used as the SourceGraphic.

Note: BackgroundImage cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach taken here is a workaround because we can't use BackgroundImage.

SVG

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
    <filter id="imageIn">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
    <filter id="imageOut">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out" />
    </filter>
    <filter id="imageAtop">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop" />
    </filter>
    <filter id="imageXor">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor" />
    </filter>
    <filter id="imageArithmetic">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite
        in2="SourceGraphic"
        operator="arithmetic"
        k1="0.1"
        k2="0.2"
        k3="0.3"
        k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter" />
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

Result

Specifications

Specification
Filter Effects Module Level 1> # feCompositeElement>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`feComposite`	5	≤18	3	≤12.1	6	18	4	≤12.1	6	1.5	4.4	6
`in`	5	≤18 Before Edge 79, `BackgroundImage` and `BackgroundAlpha` were supported.	3	15	6	18	4	14	6	1.5	4.4	6
`in2`	5	≤18 Before Edge 79, `BackgroundImage` and `BackgroundAlpha` were supported.	3	15	6	18	4	14	6	1.5	4.4	6
`k1`	5	79	3	15	6	18	4	14	6	1.5	4.4	6
`k2`	5	79	3	15	6	18	4	14	6	1.5	4.4	6
`k3`	5	79	3	15	6	18	4	14	6	1.5	4.4	6
`k4`	5	79	3	15	6	18	4	14	6	1.5	4.4	6
`operator`	5	≤18	3	15	6	18	4	14	6	1.5	4.4	6