kernelMatrix

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThekernelMatrix attribute defines the list of numbers that make up the kernel matrix for the<feConvolveMatrix> element.

Values are separated by space characters and/or a comma. The number of entries in the list must equal to<orderX> by<orderY> as defined in theorder attribute.

You can use this attribute with the following SVG elements:

<feConvolveMatrix>

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">  <filter x="0" y="0" width="100%" height="100%">    <feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1" />  </filter>  <filter x="0" y="0" width="100%" height="100%">    <feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1" />  </filter>  <image    href="mdn_logo_only_color.png"    width="200"    height="200"    filter="url(#convolveMatrix1)" />  <image    x="220"    href="mdn_logo_only_color.png"    width="200"    height="200"    filter="url(#convolveMatrix2)" /></svg>

Value	`<list of numbers>`
Default value	None
Animatable	Yes

The list of<number>s that make up the kernel matrix for the convolution. Values are separated by space characters and/or a comma. The number of entries in the list must equal<orderX> times<orderY>.

If the result oforderX *orderY is not equal to the number of entries in the value list, the filter primitive acts as a pass through filter.