<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:
• Krita Paint plus Vector Drawing Portable Application
• Inkscape: Combine the Paths of Multiple Shapes
• Tips and Tricks for Getting Free Images
• Graphics Design for Beginners - Blur Filters
• Inkscape - Free Vector Graphics Illustration Package
• Inkscape Layers and Z-Order
• SVG Basic Shapes Tutorials
• Graphics File Formats for Your Web Page
• How to Make a Simple Video
• How to Create a Simple Video with Windows Movie Maker