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”.
<!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 =
< image x = "310" y = "10" width = "280" height = "350" preserveAspectRatio = "true" filter = "url(#new)"
xlink:href =
</ svg >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the <feFuncG> element with type “discrete”.
<!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 =
< image x = "310" y = "10" width = "280" height = "350" preserveAspectRatio = "true" filter = "url(#new)"
xlink:href =
</ 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.
<!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: