<feComposite>

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.

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:

<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 the xor operator (for mutual exclusion).

Here is our result:

Main attributes of <feComposite>

Browser compatibility

The <feComposite> tag is supported by the majority of modern browsers: