SVG <feConvolveMatrix> Filter

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
inSpecifies the input for the given filter primitive.
orderSpecifies the size of the matrix to be used by a <feConvolveMatrix> element.
kernelMatrixSpecifies the list of numbers that make up the kernel matrix for the <feConvolveMatrix> element.
divisorA number yield by the input image is divided by the value given to the divisor attribute to yield the final destination color value.
biasIt shifts the range of the filter.
targetXSpecifies the positioning in X of the convolution matrix relative to a given target pixel in the input image.
targetYSpecifies the positioning in Y of the convolution matrix relative to a given target pixel in the input image.
edgeModeSpecifies how to extend the input image as necessary with color values.
kernelUnitLengthSpecifies the intended distance in current filter units.
preserveAlphaSpecifies how a <feConvolveMatrix> element handled alpha transparency.

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author