SVG <feFuncR> Element

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

In this article, we will learn about the <feFuncR> element which is an SVG filter primitive that is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element. <feComponentTransfer> element implements color manipulations on each color channel separately.

The four color channels of this element are as follows.

<feFuncR> element: This element is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element.
<feFuncG> element: This element is used to transfer function for the green component of the input graphic of its parent <feComponentTransfer> element.
<feFuncB> element: This element is used to transfer function for the blue component of the input graphic of its parent <feComponentTransfer> element.
<feFuncA> element: This element is used to transfer function for the alpha component of the input graphic of its parent <feComponentTransfer> element.

Note: Remember when you perform color manipulations the element should only have one child element of each type.

Syntax:

<feFuncR type="type_name" tableValues="value_name"/>

The core attribute used:

id: It is used to assign a unique name to an element
lang: It is used to specify the primary language used in contents and attributes containing text content of particular elements.
tabindex: It is used to allow you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
xml:base: It is used to specify a base IRI other than the base IRI of the document or external entity.
xml:lang: It is used to be the primary language used in contents and attributes containing text content of particular elements.
xml:space: It is used to handle whitespace characters inside elements.

Transfer function attributes:

type: It is a generic attribute and it has different meanings based on the context in which it's used.
tableValues: It is used to define a list of numbers defining a lookup table of values for a color component transfer function.
slope: It is used to indicate the vertical stroke angle of a font.
intercept: It is used to define the intercept of the linear function of color component transfers when the type attribute is set to linear.
amplitude: It is used to control the amplitude of the gamma function of a component transfer element when its type attribute is gamma.
exponent: It is used to define the exponent of the gamma function.

Example 1: In the below code, we will make use of the SVG <feFuncR> element.

HTML

<!DOCTYPE html>
<html>

<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>
                    <feFuncR type="table" 
                        tableValues="0 0 1 0" />
                </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-300x300.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-300x300.png" />
    </svg>
</body>

</html>

Output:

Example 2: In the below code, we will make use of the <feFuncR> element.

HTML

<!DOCTYPE html>
<html>

<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>
                    <feFuncR type="table" 
                        tableValues="1 0 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/20210915115837/gfg3-300x300.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-300x300.png" />
    </svg>
</body>

</html>

Output:

Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFuncR

Explore