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:
• Use GIMP to Scale (Resize) an Image
• How to Make a Simple Video
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• An Insight to Logos
• How to Make a Simple Animated Banner in Flash CS3
• Inscape Text in a Shape
• Inkscape Basics
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• SVG Example Code to Scale Elements
• How to De-haze a Photo with GIMP