SVG feComposite Filter Operators
feComposite combines two filter inputs using set-like operations such as over, in, out, atop, and xor.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Understanding the Standard Composite Operators
feComposite's operator attribute accepts over (default layering), in (keeps only overlapping areas of the first input), out (keeps only non-overlapping areas), atop (keeps the first input clipped to the second's shape), and xor (keeps only non-overlapping areas of both), each producing a distinctly different combination of two filter inputs' overlapping regions.
- over layers the first input normally on top of the second
- in and out keep only overlapping or only non-overlapping regions respectively
- atop and xor produce more specialized clipped or exclusive-overlap combinations
Using the arithmetic Operator for Custom Blending
The arithmetic operator offers a fifth option that combines two inputs using a formula with k1 through k4 coefficients, giving fine mathematical control over exactly how pixel values from each input blend together, useful for advanced filter effects that the standard named operators can't achieve directly.
- arithmetic operator combines inputs using a k1-k4 coefficient formula
- Offers fine mathematical control beyond the standard named operators
- Useful for advanced custom blending effects in complex filter chains
Frequently Asked Questions
Which feComposite operator is most commonly used for drop shadows?
The 'over' operator is most common for simple layering effects like drop shadows, since it just places one filter result normally on top of another without any special clipping logic.
Is feComposite necessary if I only need a simple blend effect?
For simple blending, mix-blend-mode in CSS or the SVG feBlend primitive are often simpler — feComposite is more useful specifically for set-like clipping and combining operations feBlend doesn't directly support.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG