<feFlood>

The <feFlood> tag is an SVG primitive used to fill an entire region with a uniform color.

It is generally used in combination with other primitives to create visual effects, such as shadows or color blends.

Use <feFlood> to fill a region with a uniform color and combine it with other filters for more complex effects.

Structure and syntax of the <feFlood> tag

The <feFlood> 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="floodExample">
            <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(#floodExample)" />
</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 <feFlood>

Best practices

Always combine your <feFlood> tag with <feComposite> to control how the color is applied.

Also, always remember to assign a result attribute to be able to reuse this primitive in more complex filters.

Browser compatibility

The <feFlood> tag is widely supported by modern browsers: