SVG <feConvolveMatrix> Filter
You are Here:
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
Attribute | Explanation |
---|---|
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. |
Reminder
Hi Developers, we almost covered 91% of SVG Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in SVG.
Please do google search for:
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.