<radialGradient id="fade">
<stop offset="0%" stop-color="white" stop-opacity="1.0" />
<stop offset="50%" stop-color="white" stop-opacity="0.7" />
<stop offset="100%" stop-color="white" stop-opacity="0.0" />
</radialGradient>
<mask id="fademask">
<ellipse cx="225" cy="150" rx="225" ry="150" fill="url(#fade)" />
</mask>
<image xlink:href="http://bucarotechelp.com/design/graphics/images/leaves.jpg" x="0" y="0" width="480" height="353" mask="url(#fademask)" />
</svg>
Masking is a similar to clipping, except that clipping defines an area of a graphic element that will be visible and makes a sharp boarder between the visible and clipped areas. A mask defines an area where each pixel of the mask has a degree of transparency and opaqueness that lets some of the graphic element show through, making a blurry boundary between the visible and masked areas.
In the example shown above, a radial gradient is defined and given an id of "fade". A mask is defined and given an id of "fademask". The radial gradient is then used as the fill of the mask. The image leaves.jpg is then loaded with xlink:href and the mask is used with the mask attribute in the leaves image tag.
A mask works by using its alpha channel to allow or block pixels of the image from showing through. The less opaque a part of the mask is, the less visible that part of the image will be. you can make the mask stop-colors any color you like, but it will turn out white in the result because mask uses only the transparency bits of the mask.
More Graphics Design Tips:
• Inkscape Preferences
• Inkscape Text Kerning
• How to Trace an Image Using Inkscape
• How to Make a Simple Animated Banner in Flash CS3
• Tips For Hand Coding MathML
• MathML Elements to Display Subscripts and Superscripts
• Pencil Free Open Source Cartoon Animation Drawing Program
• How to Use Draw Bezier
• History of Type Development and Type Terminology
• Animation Software - The Amazing 3D World