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:
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• SVG Image Clipping
• Inkscape - Free Vector Graphics Illustration Package
• Graphic Design Meets Open Source
• Tips and Tricks for Getting Free Images
• SVG Basic Shapes Tutorials
• Inkscape Rectangles and Squares Drawing Tutorial
• Inkscape Layers and Z-Order
• Inkscape Text on Path
• Basic Inkscape Text