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:
• Graphics Design for Beginners - Blur Filters
• Inkscape - Free Vector Graphics Illustration Package
• Basic Inkscape Text
• Animation Software - The Amazing 3D World
• SVG Code to Create a Rectangle and Text and Translate as a Group
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• How to Use Basic Linear Gradients in Inkscape
• SVG Code for Outlined Letters Text
• Inkscape Preferences
• SVG Example Code to Skew Elements