<feConvolveMatrix>

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.

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. Each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. The basic convolution formula which is applied to each color value for a given pixel is:

COLORX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias * ALPHAX,Y

where "orderX" and "orderY" represent the X and Y values for the ‘order’ attribute, "targetX" represents the value of the ‘targetX’ attribute, "targetY" represents the value of the ‘targetY’ attribute, "kernelMatrix" represents the value of the ‘kernelMatrix’ attribute, "divisor" represents the value of the ‘divisor’ attribute, and "bias" represents the value of the ‘bias’ attribute.

Note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.

To illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows:

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255

and you define a 3-by-3 convolution kernel as follows:

1 2 3
4 5 6
7 8 9

Let's focus on the color value at the second row and second column of the image (source pixel value is 120). Assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetX’ and ‘targetY’, then resulting color value will be:

(9*  0 + 8* 20 + 7* 40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

Usage context

CategoriesFilter primitive element
Permitted contentAny 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 width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
feConvolveMatrixChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes
biasChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
divisorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
edgeModeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes
kernelMatrixChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes
kernelUnitLengthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orderChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
preserveAlphaChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
targetXChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
targetYChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support
Full support
Compatibility unknown
Compatibility unknown

See also