SVG <feConvolveMatrix> Filter

Last Updated:

What is <feConvolveMatrix> Filter?

The <feConvolveMatrix> SVG filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="point"> <feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="car-left.png" x="0" y="0" height="280" width="280" filter="url(#point)" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.
order Specifies the size of the matrix to be used by a <feConvolveMatrix> element.
kernelMatrix Specifies the list of numbers that make up the kernel matrix for the <feConvolveMatrix> element.
divisor A number yield by the input image is divided by the value given to the divisor attribute to yield the final destination color value.
bias It shifts the range of the filter.
targetX Specifies the positioning in X of the convolution matrix relative to a given target pixel in the input image.
targetY Specifies the positioning in Y of the convolution matrix relative to a given target pixel in the input image.
edgeMode Specifies how to extend the input image as necessary with color values.
kernelUnitLength Specifies the intended distance in current filter units.
preserveAlpha Specifies how a <feConvolveMatrix> element handled alpha transparency.

Share this Page

Meet the Author