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

About BTH User Agreement Privacy Site Map Contact News Feeds

SVG Image Clipping

By Stephen Bucaro

<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:
• Beginning GIMP: From Novice to Professional
• How to Make Beautiful Skies with GIMP
• Inkscape - How to Join Two Segments at Endnodes
• Pencil Free Open Source Cartoon Animation Drawing Program
• How to Make a Simple Animated Banner in Flash CS3
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• Use GIMP to Scale (Resize) an Image
• How to Trace an Image Using Photoshop
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• How to Create a Product Box in Photoshop