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. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
Usage context
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <set> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEConvolveMatrixElement interface.
Example
SVG
<svg viewBox="0 0 200 200" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<defs>
<filter id="emboss">
<feConvolveMatrix
kernelMatrix="3 0 0
0 0 0
0 0 -3"/>
</filter>
</defs>
<image xlink:href="/files/12668/MDN.svg" x="0" y="0"
height="200" width="200" style="filter:url(#emboss);" />
</svg>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<feConvolveMatrix>' in that specification. |
Working Draft | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feConvolveMatrix>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | 20 or earlier (12.10049) | (Yes) | (Yes) | (Yes) | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |