feColorMatrix filter primitive

Filter apply matrix transformation for calculate new values for RGBA and alpha for each pixel

Types

  • matrix: you give all values for 5x4 matrix
    ( for most terms, you can see effect between -1 and 1, between 0 and 1 for alpha )
  • hueRotate: you give value of angle in degrees ( 0 has no effect on picture )
  • saturate: you give value positive ( 1 don't change, 0 give black and white picture )
  • luminanceToAlpha: no parameter (give negative black and white picture )
  • Example for no effect with type="matrix":

    <defs>
       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
           <feColorMatrix type="matrix" 
      		values="1 0 0 0 0
              	        0 1 0 0 0
              	        0 0 1 0 0
                   	        0 0 0 1 0"/>
       </filter>
    </defs>
    <image filter="url(#MyFilter)" x="0" y="0" width='400' height='400' xlink:href='fondu1.jpg'/>
    
    <defs>
       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
    	<feColorMatrix type="matrix" 
      		values="1 0 0 0 0
              	        0 1 0 0 0
              	        0 0 1 0 0
                   	        0 0 0 1 0"/>
       </filter>
       <image id="MyImage" width='400' height='400' xlink:href='puzzle.jpg'/>
    </defs>
    <use filter="url(#MyFilter)" xlink:href='#MyImage' x='0' y='0'/>

    In this example, as in attribute is not given, filter primitive apply to #MyImage called in use element.

    <defs>
       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
    	<feImage xlink:href='puzzle.jpg' result="Image"/>
    	<feColorMatrix in="Image" type="matrix" 
      		values="1 0 0 0 0
              	        0 1 0 0 0
              	        0 0 1 0 0
                   	        0 0 0 1 0"/>
       </filter>
    </defs>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    This code give same result. Use element call no image, you have to create raster for feColorMatrix.
    As feColorMatrix don't accept reference to external image, you use feImage to create raster named "Image".

    Figure 1: Some effects with feColorMatrix

    See examples of effects on a JPEG picture as SVG

    Tool to modify type, parameters, see matrix values and result


    FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset


    Valid XHTML 1.0!