feMorphology filter primitive


  • operator: erode  dilate
  • radius: two positives integer for x and y
  • in: picture to modify
  • Example of code:

       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage xlink:href='puzzle.jpg' result='image1'/>
          <feMorphology in='image1' radius='2,2' operator='dilate'/>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    Figure 1: Examples of effect on JPEG and SVG picture

    Figure 2: Using feMorphology on sourceAlpha, feDiffuseLighting and feComposite

    Tool: you can modify operator, x_radius, y_radius and see effect on JPEG or SVG picture
    Example: effects on JPEG and SVG picture
                 animation focussing on a picture
                 animations with radial gradient example 1  example 2

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

    Valid XHTML 1.0!