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:
Please Login to comment...