"<feComposite>"

<feComposite> merges two inputs (in and in2) into a single output using a Porter-Duff compositing operator.

Unlike "<feBlend>", which mixes the colors of two layers, <feComposite> primarily decides which pixels are kept based on the shapes' alpha channels. It is how you do shape-based masking, intersection, or subtraction inside an SVG filter graph.

If you have ever used boolean shape operations ("intersect", "subtract", "exclude") in a vector editor, Porter-Duff operators are the per-pixel equivalent applied to alpha.

• DOM object: SVGFECompositeElement
• SVG2 spec: https://www.w3.org/TR/filter-effects/#feCompositeElement

Mental model

Throughout this page we refer to the two inputs as A (in, the red circle) and B (in2, the blue circle). The diagram below shows what each operator produces when A and B overlap:

What each operator means

• over (default) — "A drawn on top of B". A wins where both exist; where only B exists, B shows through. This is the normal "paint on top" behavior.
• in — "A clipped to B's shape". A is kept only where B is opaque; everywhere else is transparent. Useful for masking a texture to a shape.
• out — "A with B punched out". A is kept only where B is transparent. The inverse of in — useful for carving holes.
• atop — "A drawn on top of B, but only inside B's shape". Combines in (keeps the overlap) with B showing through outside that overlap.
• xor — "Either A or B, but not where they overlap". The overlap region becomes transparent.
• arithmetic — "Pixel-wise formula `k1*A*B + k2*A + k3*B + k4`". Gives you complete control over the per-channel result. Use it for cross-dissolves (k2=α, k3=1-α), custom blends, or specular-style highlights.

Practical example: clipping a shadow to its shape

A common use of <feComposite operator="in"> is to clip a blurred copy of a shape back to the original shape, producing an inner shadow/glow that stays within the shape's boundaries:

<filter id="InnerGlow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur" />
  <feComposite in="blur" in2="SourceAlpha" operator="in" result="clipped" />
  <feMerge>
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="clipped" />
  </feMerge>
</filter>

The blur would normally extend outside the shape — <feComposite operator="in"> with in2="SourceAlpha" keeps only the portion of the blur that falls inside the original shape's silhouette, producing the inner-shadow effect.

Attributes

Attribute	Default	Description
in	previous	First input (A).
in2	(none)	Second input (B). Required.
operator	over	One of over, in, out, atop, xor, arithmetic.
k1	0	Arithmetic coefficient. Only used when operator="arithmetic".
k2	0	Arithmetic coefficient. Only used when operator="arithmetic".
k3	0	Arithmetic coefficient. Only used when operator="arithmetic".
k4	0	Arithmetic coefficient. Only used when operator="arithmetic".

Inherits standard filter primitive attributes from SVGFilterPrimitiveStandardAttributes (x, y, width, height, result).