feBlend filter primitive


  • mode: normal multiply screen darken lighten
  • in: first picture
  • in2: second picture
  • Example of code:

       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage xlink:href='memo.svg' result='pict1'/>
          <feImage xlink:href='bateau.jpg' result='pict2'/>
          <feBlend in='pict1' in2='pict2' mode="screen"/>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    Figure 1: Examples for different values of mode

    Tool: you can change mode for operation and see result on pictures of your choice

    Examples for different values of mode as SVG

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

    Valid XHTML 1.0!