in SVG (SVGOpen 2010)
(Source reading material from
Lab exercises (solutions may be found on separate pages):
- 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.
- Put both the <rect> and the <image> inside a group and
give the group an id, e.g. <g id=”g”> .
- Duplicate the contents of that group by using a <use>
- Translate the <use> tag downward, using a transform so
that it is now below the original group.
- Apply an feGaussianBlur filter primitive to the <use>.
- Make three copies of an <image> side-by-side in an SVG
- Use feColorMatrix to eliminate the Red, Blue and Green
channels respectively in the three copies of the <image>
- Place three horizontal rectangles (stretching the full
width of the browser) underneath the three images.
- 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.”
- Make two copies of an <image> side-by-side in an SVG
- 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.
- See if you can use feTurbulence to mask a bitmapped
image, so that only where the turbulence values are bright does the image