Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Image Masking

<svg width="450" height="320" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:solid;">
   <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 Use Bitmap Image Fill Pattern
• How to Install the Free, Open-Source, Blender 3D Animation Application
• Inkscape - How to Join Two Segments at Endnodes
• Beginning GIMP: From Novice to Professional
• How to Make a Video Game for your Xbox for Free
• Inkscape Preferences
• SVG Example Code to Scale Elements
• How to Use Basic Linear Gradients in Inkscape
• The Game Maker's Apprentice
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268