Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact News Feeds

SVG Image Clipping

<svg width="355" height="310" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:none;">
   <clipPath id="star_mask">
      <polygon points="2 112 135 112 174 2 209 112 340 112 230 182 274 300 170 222 65 300 114 182" />
   </clipPath>

   <image xlink:href="leaves.jpg" x="0" y="0" width="480" height="353" clip-path="url(#star_clip)" />
</svg>

Two common techniques used in computer graphics are clipping and masking. Both techniques hide an area of a graphic element. Clipping defines an area of a graphic element that will be visible. Everything outside this region will not be visible, it will be "clipped".

Masking is a similar technique that hides an area of a graphic element, but whereas clipping makes a sharp boarder between the visible and clipped areas, masking makes a blurry boundary between the visible and masked areas. A mask defines an area where each pixel of the mask has a degree transparency and opaqueness letting some of the graphic element show through.

In the example shown above, the points of a polygon that forms a star are defined as the clipPath and the id of the clipPath is used with the clip-path attribute in the leaves image tag.

More Graphics Design Tips:
• How to Make a Simple Animated Banner in Flash CS3
• Inkscape Rectangles and Squares Drawing Tutorial
• Use GIMP to Scale (Resize) an Image
• Create Animated Glistening Gold Text With SVG
• Inkscape - How to Join Two Segments at Endnodes
• How to De-haze a Photo with GIMP
• Export Inkscape Drawing as an Image
• Create GIF Animations With Free GIMP Image Editing Program
• Inkscape Shadows and Highlights
• How to Create a Product Box in Photoshop