<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:
• XDdom 3D Axis and Coordinate System
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• Coding a Matrice in MathML
• What is Blender? The Software's Origins and Evolution
• SVG Matrix Transform Example Code
• How to Create a Product Box in Photoshop
• Krita Paint plus Vector Drawing Portable Application
• Inkscape Shadows and Highlights
• SVG For Responsive Web Design
• Inkscape - How to Delete a Node