W3cubDocs

/SVG

kernelMatrix

The kernelMatrix 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 the order attribute.

You can use this attribute with the following SVG elements:

Example

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1" />
  </filter>
  <filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1" />
  </filter>

  <image
    xlink:href="mdn_logo_only_color.png"
    width="200"
    height="200"
    style="filter:url(#convolveMatrix1);" />
  <image
    xlink:href="mdn_logo_only_color.png"
    width="200"
    height="200"
    style="filter:url(#convolveMatrix2); transform:translateX(220px);" />
</svg>

Usage notes

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

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 of orderX * orderY is not equal to the number of entries in the value list, the filter primitive acts as a pass through filter.

Specifications

Specification
Filter Effects Module Level 1
# element-attrdef-feconvolvematrix-kernelmatrix

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
kernelMatrix Yes 12 Yes Yes Yes No Yes Yes Yes No No Yes

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/kernelMatrix