Vachmi

The <feConvolveMatrix> filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.

A matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value.

Attributes

Attribute
Description
in
Identifies the input for the compositing operation
in2
The second input image to the compositing operation. This attribute can take on the same values as the ‘in’ attribute.
operator
The compositing operation that is to be performed.
Possible values are over | in | out | atop | xor | arithmetic

Here is the SVG code to draw this filter.

Original Image with no filter and with ConvolveMatrix filter
<filter id="convolve1">
 <feConvolveMatrix kernelMatrix=
    "1 0 0
     0 0 0
     0 0 -1" />
</filter>
Text with no filter Text with ConvolveMatrix Filter


Original Image with no filter
<svg id='path1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'>
 <g>
  <image href="../images/base-image-1.jpg" x="0" y="0" width="100" height="50">
 </g>
</svg>


Image with 3D effect
<filter id="convolve2">
 <feConvolveMatrix kernelMatrix=
    "3 0 0
     0 1 0
     0 0 -3" />
</filter>


Image turned hazy using filter
<filter id="convolve3">
 <feConvolveMatrix order="5" kernelMatrix=
    "-1 -1 -1 -1 -1
     0 0 0 0 0
     1 1 1 1 1
     0 0 0 0 0
     -1 -1 -1 -1 -1" />
</filter>


Sharpened image
<filter id="convolve7">
 <feConvolveMatrix order="5" kernelMatrix=
    "-1 -0 2 0 -1
     -1 -0 2 0 -1
     -1 -0 3 0 -1
     -1 -0 2 0 -1
     -1 -0 2 0 -1" />
</filter>