SVG <feBlend> Element (original) (raw)

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

element is used to combines two images or SVG fragments into a single graphic. It executes a pixel-wise combination of two input SVG fragments or images.

Syntax:

Attributes:

• in - It identifies input for the given filter primitive.
• in2 - It identifies the second input for the given filter primitive. It takes on the same values as the ‘in’ attribute.
• mode - It defines the blending mode on the filter primitive. If mode is not specified, the normal value is executed.

Example 1:

html `

            <feBlend in="FillPaint" 
                in2="floodFill" mode="multiply" />
        </filter>
    </defs>

    <rect x="40" y="40" width="100" 
        height="100" style="stroke: #000000; 
                     fill: lightgreen; 
                     filter: url(#spotlight);" />

    <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>
    </g>
</svg>

`

Output:

Example 2:

html `

    <rect x="1" y="1" width="198" 
        height="118" style="stroke: #000000;
                            fill: black;
                            filter: url(#Screen);" />

    <circle cx="100" cy="60" r="55" 
        stroke="black" stroke-width="3" 
        fill="Lightgreen" />

    <g fill="#FFFFFF" stroke="Green" 
        font-size="10" c font-family="Verdana">
        
        <text x="60" y="62">GeeksForGeeks</text>
    </g>
</svg>

`

Output: