SVG <feFuncG> Element

SVG stands for Scalable Vector Graphic. The SVG element path is used to define a path that starts from a position and ends at a particular position. SVG path can be used to create any basic shapes.

SVG <feFuncG> element: These elements are typically children of the feComponentTransfer element and specify the transfer functions of the green component of the input graphic of its parent <feComponentTransfer> element.

Syntax:

<feComponentTransfer>       
    <feFuncG type="" tableValues=""/>
</feComponentTransfer>

Attributes: It does not have any specified attribute but it accepts Global attributes.

Example 1:The following code demonstrates the <feFuncG> element with type "table".

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG feFuncG Element</title>
</head>

<body>
    <svg width="640" height="550" 
        viewBox="0 0 640 550">
        <defs>
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%">

                <feComponentTransfer>
                    <feFuncG type="table" 
                        tableValues="1 1 0 0" />
                </feComponentTransfer>
            </filter>
        </defs>

        <image x="10" y="10" width="280" 
            height="350" preserveAspectRatio="true"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" />
        <image x="310" y="10" width="280" 
            height="350" preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" />
    </svg>
</body>

</html>

Output:

Example 2: The following code demonstrates the <feFuncG> element with type "discrete".

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG feFuncG Element</title>
</head>

<body>
    <svg width="640" height="550" 
        viewBox="0 0 640 550">
        <defs>
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%">
                <feComponentTransfer i
                    n="BackgroundImage" result="A">
                    <feFuncG type="discrete" 
                        tableValues="1 0.5 0.5 0.5" />
                </feComponentTransfer>
            </filter>
        </defs>

        <image x="10" y="10" width="280" 
            height="350" preserveAspectRatio="true"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" />
        <image x="310" y="10" width="280" 
            height="350" preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" />
    </svg>
</body>

</html>

Output:

Example 3: The following code demonstrates the <feFuncG> element with the type "gamma" and attributes like "amplitude","exponent","offset" are set with values.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG feFuncG Element</title>
</head>

<body>
    <svg width="640" height="550" 
        viewBox="0 0 640 550">
        <defs>
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%">

                <feComponentTransfer 
                    in="BackgroundImage" result="A">
                    <feFuncG type="gamma" amplitude="3" 
                        exponent="3" offset="0">
                    </feFuncG>
                </feComponentTransfer>
            </filter>
        </defs>
        <image x="10" y="10" width="280" height="350" 
            preserveAspectRatio="true"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" />
        <image x="310" y="10" width="280" height="350"
             preserveAspectRatio="true" filter="url(#new)"
            xlink:href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" />
    </svg>
</body>

</html>

Output:

Explore