SVG <feColorMatrix> Element

Last Updated : 03 Jun, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <feColorMatrix> SVG filter element changes colors based on a color transformation by a matrix of color values and other operations like luminance to alpha, saturate, matrix, and hueRotate. you can change colour saturation, perform hue rotations, selectively adjust alpha values of particular channels, adjust contrast, and brightness and more like editing by photoshop.

Syntax:

<filter>
    <feColorMatrix in="attributes" type="" values="" />
</filter>

Attributes:

Global Attributes: Some global attributes are used like core attributes and styling attributes, etc.
Specific Attributes: It is used to change the attributes of in, type, and values.

The <feColorMatrix> element allows you to change color values in a very generalized way.

matrix value better visualization

The <feColorMatrix> element is another of the common filter primitives. It comes in four types of variations, each of which has a different values requirement:

type=”luminanceToAlpha”: It helps to convert colors to degrees of transparency.

Example:

<filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" 
        type="luminanceToAlpha" 
        values="0.2" />
</filter>

type=”saturate”: It increases and decreases saturation while preserving luminance.
- > value is a positive number where 1 means no change and values greater than 1 increase saturation.
- > 0 means complete desaturation (grayscale).

Example:

<filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" 
        type="luminanceToAlpha" 
        values="0.2" />
</filter>

type=”matrix”: It performs complex color manipulations using matrix algebra; when the value we put in the matrix according to the table of each channel in the output is specified from a combination of its existing color.

Example:

<filter>
    <feColorMatrix in="SourceGraphic" 
    type="matrix" 
    values="0 0 0 0 0
            1 1 1 1 0
            0 0 0 0 0
            0 0 0 1 0" />
</filter>

type=”hueRotate”: It spins every color around the color wheel, adjusting the lightness to maintain constant luminance.

Example:

<filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" 
    type="hueRotate" />
</filter>

Note: The property is inherited, so you can set it once on a <filter>, or even on the <svg> as a whole.

Example: Below given are a few examples of the above element:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href=""> 
</head> 
  
<body> 
  
    <svg width="30%" height="30%" viewBox="0 0 300 500" 
         preserveAspectRatio="xMidYMid meet"
        <defs> 
            <g id="squares"> 
                <rect x="0" y="0" width="30" height="30" 
                      style="fill: #f00;" /> 
                <rect x="40" y="0" width="30" height="30" 
                      style="fill: #0f0;" /> 
                <rect x="80" y="0" width="30" height="30" 
                      style="fill: #00f;" /> 
                <rect x="120" y="0" width="30" height="30" 
                      style="fill: #ff0;" /> 
                <rect x="160" y="0" width="30" height="30" 
                      style="fill: #f0f;" /> 
                <rect x="200" y="0" width="30" height="30" 
                      style="fill: #0ff;" /> 
            </g> 
        </defs> 
        <use href="#squares" /> 
        <text x="70" y="50">Reference</text> 
  
        <!-- identity matrix -->
        <filter id="colorMeTheSame"> 
            <feColorMatrix in="SourceGraphic" type="matrix" 
                           values="1 0 0 0 0 
                                   0 1 0 0 0 
                                   0 0 1 0 0 
                                   0 0 0 1 0" /> 
        </filter> 
        <use href="#squares" transform="translate(0 70)" 
             filter="url(#colorMeTheSame)" /> 
        <text x="70" y="120">Identity matrix </text> 
  
        <!-- Combine RGB into green matrix -->
        <filter id="colorMeGreen"> 
            <feColorMatrix in="SourceGraphic" type="matrix" 
                           values="0 0 0 0 0 
                                   1 1 1 1 0 
                                   0 0 0 0 0 
                                   0 0 0 1 0" /> 
        </filter> 
        <use href="#squares" transform="translate(0 140)" 
             filter="url(#colorMeGreen)" /> 
        <text x="70" y="190">rgbToGreen </text> 
  
        <!--  luminanceToAlpha -->
        <filter id="colorMeSaturate"> 
            <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"
                           values="0.2" /> 
        </filter> 
        <use href="#squares" transform="translate(0 210)" 
             filter="url(#colorMeSaturate)" /> 
        <text x="70" y="260">luminanceToAlpha </text> 
  
        <!-- saturate-->
        <filter id="colorMeHueRotate"> 
            <feColorMatrix in="SourceGraphic" type="saturate " 
                           values="180" /> 
        </filter> 
        <use href="#squares" transform="translate(0 280)" 
             filter="url(#colorMeHueRotate)" /> 
        <text x="70" y="330">saturate</text> 
  
        <!-- hueRotate -->
        <filter id="colorMeLTA"> 
            <feColorMatrix in="SourceGraphic" type="hueRotate" /> 
        </filter> 
        <use href="#squares" transform="translate(0 350)" 
             filter="url(#colorMeLTA)" /> 
        <text x="70" y="400">hueRotate</text> 
    </svg> 
  
    <script src="" async defer></script> 
</body> 
</html>