SVG <feConvolveMatrix> Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feConvolveMatrix> SVG filter primitive changes pixels in the input image with neighboring pixels to produce a resulting image.
Syntax:
<feConvolveMatrix in="" order="" kernelMatrix="" divisor=""
bias="" targetX="" targetY="" edgeMode="" kernelUnitLength=""
preserveAlpha="" />
Attributes:
- in – It stores input for the given primitive.
- order – It tests the size of the matrix to be used by the filter element. By default, it is 3 X 3.
- kernelMatrix – It defines the list of numbers that form the kernel matrix.
- divisor – It defines the sum of values of the kernel matrix. By default, it is set to 1.
- bias – It sets the range of the filter. By default, it is set to 0.
- targetX – It shifts the convolution matrix horizontally. (Range – 0 <= targetX < orderX).
- targetY – It shifts the convolution matrix vertically. (Range – 0 <= targetY < orderY).
- kernelUnitLength – It tells the intended distance between successive columns and rows in the kernelMatrix. The intended distance is represented in current filter units. The default value is 1.
- preserveAlpha – It value is either true or false. It indicates whether the convolution will only apply to the alpha and color channels. The default value is false.
Example 1:
<!DOCTYPE html>
< html >
< body >
< svg width = "100%" height = "220" >
< defs >
< filter id = "convolve" >
< feConvolveMatrix kernelMatrix =
"1 5 -1 -1 0 4 0 0 -1" />
</ filter >
</ defs >
< rect x = "40" y = "40" width = "100"
height = "100"
filter: url(#convolve) style=
"stroke: #000000;
fill: darkgreen;" />
< g fill = "#FFFFFF" stroke = "black"
font-size = "10" font-family = "Verdana" >
< text x = "50" y = "90"
filter = "url(#convolve)" >
GeeksForGeeks
</ text >
</ g >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html>
< html >
< title >SVG Filter</ title >
< body >
< svg width = "100%" height = "220" >
< defs >
< filter id = "convolve" >
< feConvolveMatrix kernelMatrix
= "-7 -10 -15 -10 10 -1 0 0 -1" />
</ filter >
</ defs >
< rect x = "1" y = "1" width = "198"
height = "118"
style="stroke: #000000;
fill: none;
filter: url(#convolve);" />
< circle cx = "100" cy = "60" r = "55"
stroke = "black" stroke-width = "3"
fill = "Lightgreen"
filter: url(#convolve) />
< g fill = "#FFFFFF" stroke = "black"
font-size = "10" font-family = "Verdana" >
< text x = "60" y = "62" filter = "url(#convolve)" >
GeeksForGeeks</ text >
</ g >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...