In this article
The <feComposite> tag is an SVG primitive used to combine two images or other graphics using a mathematical operation.
It allows, for example, to:
- mask;
- overlay;
- or blend;
graphic elements, offering precise control over their interaction.
Good to know
Use <feComposite> to apply masking, intersection, or blending effects to your SVG graphics.
Structure and syntax of the <feComposite> tag
The <feComposite> tag is always used within an <svg> tag.
Here is a simple example:
HTML
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="compositeExample">
<feFlood flood-color="blue" result="blueFill" />
<feFlood flood-color="red" result="redFill" />
<feComposite in="blueFill" in2="redFill" operator="xor" result="combined" />
</filter>
</defs>
<rect x="10" y="10" width="180" height="180" filter="url(#compositeExample)" />
</svg>In this example:
<feFlood>creates two floods of colors (blue and red);<feComposite>combines the two floods using thexoroperator (for mutual exclusion).
Here is our result:
Main attributes of <feComposite>
| Attribute | Description | Possible values |
|---|---|---|
in | Specifies the first source graphic to use. | Can be a direct source (e.g., SourceGraphic) or an intermediate result (defined by result in other primitives). |
in2 | Specifies the second source graphic to use. | Same as in. |
operator | Determines the mathematical or logical operation to apply to combine in and in2. |
|
k1, k2, k3, k4 | Coefficients for customizing calculations when using the arithmetic operator. | Numerical values. |
Browser compatibility
The <feComposite> tag is supported by the majority of modern browsers:
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Partial (IE 10+) |