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:

Output:

Example 2:

Output: