SVG <feMerge> Element (original) (raw)

Last Updated : 31 Mar, 2022

The SVG element allows filter effects to be applied concurrently instead of sequentially. The canonical implementation of is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device.

Syntax:

----

Attributes : It does not contain any attribute.

Example 1:

HTML `

        <feMerge>
            <feMergeNode in="offsetBlur" />
            <feMergeNode in="litPaint" />
        </feMerge>

    </filter>

    <rect x="1" y="1" width="198" height="118" 
            fill="green" stroke="blue" />
    <circle cx="100" cy="60" r="55" stroke="black" 
            stroke-width="3" fill="white" />
    <g fill="#FFFFFF" stroke="Green" font-size="10"
            font-family="Verdana">
        <text x="60" y="62">GeeksForGeeks</text>
</svg>

`

Output:

Example 2:

HTML `

        <feMerge>
            <feMergeNode in="offsetBlur" />
            <feMergeNode in="litPaint" />
        </feMerge>

    </filter>

    <rect x="40" y="40" width="100" height="100"
        style="stroke: #000000; fill: lightgreen; 
        filter: url(#feOffset);" />
    <rect x="40" y="40" width="100" height="100" 
        style="stroke: #000000; fill: green;" />
    <g fill="#FFFFFF" stroke="black" font-size="10" 
        font-family="Verdana">
        <text x="50" y="90">GeeksForGeeks</text>
</svg>

`

Output: