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:
• Create GIF Animations With Free GIMP Image Editing Program
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• Inkscape Rectangles and Squares Drawing Tutorial
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• Tips and Tricks for Getting Free Images
• How to Use Basic Linear Gradients in Inkscape
• Stop Motion Animation: Nine Creative and Easy Techniques
• Inkscape - How to Join Two Segments at Endnodes
• Inkscape Text Kerning
• Building an Image with a Logo