Your Search Results


    This filter changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color.

    Usage context

    Categories Filter primitive element
    Permitted content Any number of the following elements, in any order:
    <animate>, <set>
    Normative document SVG 1.1 (2nd Edition)


    <svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
      <text x="70" y="50">Reference</text>
        <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
        <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
      <text x="70" y="120">matrix</text>
      <filter id="colorMeMatrix">
        <feColorMatrix in="SourceGraphic"
          values="0 0 0 0 0
                  1 1 1 1 0
                  0 0 0 0 0
                  0 0 0 1 0" />
      <g filter="url(#colorMeMatrix)">
        <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
      <text x="70" y="190">saturate</text>
      <filter id="colorMeSaturate">
        <feColorMatrix in="SourceGraphic"
          values="0.2" />
      <g filter="url(#colorMeSaturate)">
        <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
        <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
      <text x="70" y="260">hueRotate</text>
      <filter id="colorMeHueRotate">
        <feColorMatrix in="SourceGraphic"
          values="180" />
      <g filter="url(#colorMeHueRotate)">
        <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
      <text x="70" y="320">luminanceToAlpha</text>
      <filter id="colorMeLTA">
        <feColorMatrix in="SourceGraphic"
          type="luminanceToAlpha" />
      <g filter="url(#colorMeLTA)">
        <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />

    The rendering for this example is:

    ScreenshotLive sample


    Global attributes

    Specific attributes

    DOM Interface

    This element implements the SVGFEColorMatrixElement interface.

    See also

    Document Tags and Contributors

    Contributors to this page: trevorh, Jeremie, Manuel_Strehl, kscarfone, erickj
    Last updated by: erickj,