<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 - How to Join Two Segments at Endnodes
• Krita Paint plus Vector Drawing Portable Application
• Image Scanning - Confused About DPI?
• Inkscape Rectangles and Squares Drawing Tutorial
• MathML mo Element Operators
• Inscape Text in a Shape
• Inkscape Exercise: Draw Photorealistic Sphere
• Inkscape Layers and Z-Order
• SVG Code to Place Text on a Curved Path
• MathML Element to Display a Radical