<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:
• Five Surprising Reasons I Use Krita for Photo Editing
• Coding a Matrice in MathML
• SVG Example Code to Skew Elements
• Image Scanning - Confused About DPI?
• Inkscpe Snap Controls Bar
• Tips For Hand Coding MathML
• Inkscape - How to Add a New Node
• Find Free Stock Photos You'll Actually Want to Use For Your Website or Blog
• How to Remove PNG and JPEG EXIF Metadata
• Coding Color for the Web