Filter effects in SVG (SVGOpen 2010)


(Source reading material from )


Lab exercises (solutions may be found on separate pages):


Exercise A


  1. Define an SVG document containing, side-by-side, a <rect> and an <image>. The image should reference, through xlink:href, a bitmapped image in a .jpg, .gif, or .png formatted file.
  2. Put both the <rect> and the <image> inside a group and give the group an id, e.g. <g id=”g”> .
  3. Duplicate the contents of that group by using a <use> tag.
  4. Translate the <use> tag downward, using a transform so that it is now below the original group.
  5. Apply an feGaussianBlur filter primitive to the <use>.




Exercise B

  1. Make three copies of an <image> side-by-side in an SVG document.
  2. Use feColorMatrix to eliminate the Red, Blue and Green channels respectively in the three copies of the <image>
  3. Place three horizontal rectangles (stretching the full width of the browser) underneath the three images.
  4. Modify the filter associated with one of the images so as to turn its red channel to transparent. The three underlying rectangles should “shine through.”



Exercise C

  1. Make two copies of an <image> side-by-side in an SVG document.
  2. Explore the difference between first applying (on one image) an feGaussianBlur and then a sharpen convolution and (on the other image) applying the filter primitives in the reverse order.



Exercise D

  1. See if you can use feTurbulence to mask a bitmapped image, so that only where the turbulence values are bright does the image shine through.