Skip to content
Related Articles

Related Articles

SVG <feComposite> Element

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 27 Jul, 2022
Improve Article
Save Article

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

The <feComposite> SVG  filter element performs the mathematical combination of two inputs pixel-wise in image space and inputs based on transparent areas like the background of the image, by using one of the operations: over, in, atop, out, xor, lighter, or arithmetic.

Syntax:

<filter>
    <feImage xlink:href="" />
    <feComposite in="" in2="" operator=""/>    
</filter>

Attribute Values:

  • in, in2: It specifies the input for the given filter primitives.
  • operator: This attribute specifies 2 meanings for the context it will be utilized i.e. it can either define the compositing operation or morphing operation, that will be performed for the 2 given inputs.
  • k1, k2, k3, k4: It specifies the values that will be utilized for the arithmetic operation of the <feComposite> filter primitive.

SVG <feComposite> element operations:

<feComposite operator=”over” in=”A” in2=”B”/>: It is the default operation that will be used when no operations or operation that doesn’t support, will be performed on the image and the image will be provided in its original size and position. This operator treats the two images as layers that overlap with each other, like the top layer, which will show through parts of the bottom layer. Here, the “in2” attribute is used for the circle.

Example 1: In this example, we use the GFG logo for an “over” operation for the background with a red circle.

HTML




<!DOCTYPE html>
  
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
                        x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" 
                             operator="over" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">over</text>
        </g>
    </svg>
</body>
</html>


Output:

 

<feComposite operator=”in” in=”A” in2=”B”/>: This operator can be utilized to display the portion of the source graphics(declared in the in attribute) which overlaps with destination graphics(declared in the in2 attribute), by discarding the destination graphics. Here, the in =”A” is used for the transparent background logo & the in2 = “B ” is used for the circle.

Example 2: In this example, we take a GFG logo for the circle background, and use an “in” operation that hides the outer layer of the circle.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="imagein">
                <feImage xlink:href=
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="in" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00"
                    style="filter:url(#imagein)" />
            <text x="80" y="-5">in</text>
        </g>
    </svg>
</body>
</html>


Output:

 

<feComposite operator=”out” in=”A” in2=”B”/>: This operator displays the portion of the source graphics, declared in the in attribute, which lies outside of the destination graphic(declared in the in2 attribute). Here, the in =”A” is used for the transparent background logo & the in2 = “B ” is used for the circle.

Example 3:  In this example, we take the logo, make the circle background, and use an “out” operation to hide the circle’s inner layer.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display: inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="out" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">Out</text>
        </g>
    </svg>
</body>
</html>


Output:

 

<feComposite operator=”xor” in=”A” in2=”B”/>: This composite operator displays an image that is frequently used to create a composite image of two images set against a textured. The first image is used as the source, while the second is used as the destination. The result is an image that contains portions of the two source images. Here, the in =”A” is used for the transparent background logo, & the in2 = “B ” is used for the circle.

Example 4: In this example, we take the logo and make the circle background and use a “xor” operation which set an outer layer of circle color in the inner side layer of the gfg logo circle.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:450px;">
  
        <defs>
            <filter id="imageXor">
                <feImage xlink:href=
                         x="10px" y="10px" width="160px" />
                <feComposite in2="SourceGraphic" operator="xor" />
            </filter>
        </defs>
        <g transform="translate(0,240)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px"
                    fill="#c00" 
                    style="filter:url(#imageXor)" />
            <text x="80" y="-5">xor</text>
       </g>
    </svg>
</body>
</html>


Output:

 

<feComposite in=”A” in2=”B” operator=”arithmetic”…/>: The output of the <feDiffuseLighting> and <feSpecularLighting> filters having the texture data, can be combined with the help arithmetic option, where result for each channel of each pixel is calculated as follows:

k1 * A * B + k2 * A + k3 * B + k4

where,

A and B are the values for that channel and pixel from the input graphics.

  • k1, k2, k3 & k4 denote the attribute’s value having the same name.

    The composite operator displays the image show accordingly to arithmetic values.

    Example 5: In this example, we take a gfg logo and make the circle background and use an “arithmetic” operation which helps to edit the logo and its background circle.

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display: inline;">
            <defs>
                <filter id="imageArithmetic">
                    <feImage xlink:href=
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic"
                                 operator="arithmetic"
                                 k1="0.1" k2="0.2" k3="0.3" k4="0.4" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
      
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#imageArithmetic)" />
                <text x="80" y="-5">Arithmetic</text>
            </g>
        </svg>
    </body>
    </html>

    
    

    Output:

     

    <feComposite operator=”atop” in=”A” in2=”B”/>: This operation indicates the “in” attribute, which overlaps the destination graphic defined in the “in2″  attribute and replaces the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched. Here, the in =”A” is used for the transparent background logo, & the in2 = “B ” is used for the circle.

    Example 6: In this example, we take a gfg logo and make the circle background,  and use an “atop” operation which hides the outer layer of the circle.

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display:inline;">
            <defs>
                <filter id="image">
                    <feImage xlink:href=
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic" operator="atop" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#image)" />
                <text x="80" y="-5">atop</text>
            </g>
        </svg>
    </body>
    </html>

    
    

    Output:

     

    <feComposite operator=”lighter” in=”A” in2=”B”/>: This value indicates that the “in” attribute and the destination graphic defined in the “in2 “attribute are displayed.

    The lighter operation operator of the composite operator displays image is frequently used to create a composite image of two images in the different textured top 

    Example 7: In this example, we take a gfg logo and make the circle background,  and use a “lighter” operation that combines it with the outer layer of the circle.

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display:inline;">
            <defs>
                <filter id="image">
                    <feImage xlink:href=
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic" operator="lighter" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
                <circle cx="90px"
                        cy="80px" 
                        r="70px" 
                        fill="#c00"
                        style="filter:url(#image)" />
                <text x="80" y="-5">lighter</text>
            </g>
        </svg>
    </body>
    </html>

    
    

    Output:

     


    My Personal Notes arrow_drop_up
  • Related Articles

    Start Your Coding Journey Now!