feColorMatrix (SVG Filter Effect)

By mbystedt on Feb 27, 2014, 9:50:31 PM

The color matrix filter provides a way to do some color manipulation. If you know some matrix math then this can be a powerful filter. Otherwise, there are three predefined operations that can handle a few specialized color modifications.

(saturate | hueRotate | luminanceToAlpha | matrix)
The first three provide special operations. The last sets the color using the values matrix.
Varies | RGBA Matrix
Single numeric value for presets. If the type is matrix, the matrix is multiplied by the color at a point to generate new value.


  • saturate: 0.0 to 1.0
  • hueRotate: 0 to 360
  • luminanceToAlpha: Not Used

With the matrix type, the identity matrix (does nothing) is setup in the live demo. The matrix is used to look at each pixel's RGBA value and compute a resulting color. The rows of the matrix each control one of the RGBA channels. The math used to compute the red channel is shown.

SVG uses fractional values for color so each channel has a value between 0 and 1. If a channel goes above 1 or below 0 then it is clipped. Therefore, each row should add up to around 1. Negative values are permitted. Since the image is opaque, you must set the 1 in the 4th (alpha) row to between 0 and 1 to see any transparency.

See: Filter Effect Common Attributes

Live Demo