Clipping and masking allow portions of the image to be visible or hidden.


A clip path is a method to select certain portions of an SVG image where the portions inside the path are visible and the portions outside are not. A clip path is defined in <defs> using the <clipPath> element and invoked in the body of the document with the clip-path attribute. The <clipPath> element has few attributes.

clipPathUnitsDefine the coordinate system for the contents of the clip path.objectBoundingBox | userSpaceOnUseuserSpaceOnUse


In this example, we apply a circular clip path to a coloured rectangle. Only the area within the circular clip path is visible.

clip path <defs>   <clipPath id=”cutCircle”>     <circle cx=”125″ cy=”125″ r=”100″/>   </clipPath>   <linearGradient id=”fire” x1=”0%” y1=”100%” x2=”0%” y2=”0%”>     <stop offset=”10%” stop-color=”#ff0000″/>     <stop offset=”90%” stop-color=”#ffff00″/>   </linearGradient> </defs> <rect width=”250″ height=”250″ clip-path=”url(#cutCircle)” fill=”url(#fire)” stroke=”#000000″ stroke-width=”4″/>

Cut paths may be as simple or as complex as you wish.

clip path <defs>   <clipPath id=”cutPattern”>     <circle cx=”50″ cy=”50″ r=”20″/>     <circle cx=”75″ cy=”175″ r=”30″/>     <circle cx=”125″ cy=”125″ r=”50″/>     <circle cx=”175″ cy=”150″ r=”10″/>     <circle cx=”200″ cy=”200″ r=”30″/>     <circle cx=”225″ cy=”50″ r=”10″/>   </clipPath>   <linearGradient id=”spring” x1=”0%” y1=”100%” x2=”0%” y2=”0%”>     <stop offset=”10%” stop-color=”#ffff00″/>     <stop offset=”90%” stop-color=”#00ff00″/>   </linearGradient> </defs> <rect width=”250″ height=”250″ clip-path=”url(#cutPattern)” fill=”url(#spring)” stroke=”#000000″ stroke-width=”4″/>

Text can be used as a clip path.

Cool Cool clip path <defs>   <clipPath id=”cutText”>     <text x=”125″ y=”150″ font-size=”96″ font-weight=”600″ text-anchor=”middle” textLength=”200″>Cool</text>   </clipPath>   <linearGradient id=”coolColours” x1=”0%” y1=”0%” x2=”100%” y2=”0%”>     <stop offset=”10%” stop-color=”#0000ff”/>     <stop offset=”90%” stop-color=”#ff00ff”/>   </linearGradient> </defs> <rect width=”250″ height=”250″ clip-path=”url(#cutText)” fill=”url(#coolColours)” stroke=”#000000″ stroke-width=”4″/>


Masking may be thought of as a more advanced version of clipping. It allows us to apply shapes with varying opacities over other elements. Any shape, path or text can be used as a mask. A mask is defined in <defs> using the <mask> element and is invoked in the body of the document with the mask attribute. The <mask> element takes a number of attributes:

heightControl the height of the offscreen buffer.number120%
maskContentUnitsDefine the coordinate system of the contents of the mask.objectBoundingBox | userSpaceOnUseuserSpaceOnUse
maskUnitsDefine the coordinate system of the height, width, x and y.objectBoundingBox | userSpaceOnUseobjectBoundingBox
widthControl the width of the offscreen buffernumber120%
x,yx- and y-coordinates of the upper left corner of the rectangle defining the largest offscreen buffernumber−10%

I have not used masking but it is a useful tool and so is included here.


Consider the following circle as a mask. The white part is wholly transparent and the black part is wholly opaque.

<defs>   <mask id=”maskCircle” x=”0″ y=”0″ width=”250″ height=”250″>     <circle cx=”125″ cy=”125″ r=”100″ fill=”#ffffff”/>   </mask> </defs> <rect width=”250″ height=”250″ mask=”url(#maskCircle)” fill=”#ff0000″ stroke=”#000000″ stroke-width=”4″/>

Shades of grey will result in varying opacities. A colour or opacity gradient also may be used as a mask.

<defs>   <mask id=”maskQuadrant” x=”0″ y=”0″ width=”250″ height=”250″>     <rect x=”0″ y=”0″ width=”125″ height=”125″ fill=”#cccccc” stroke=”none”/>     <rect x=”125″ y=”0″ width=”125″ height=”125″ fill=”#999999″ stroke=”none”>     <rect x=”125″ y=”125″ width=”125″ height=”125″ fill=”#666666″ stroke=”none”/>     <rect x=”0″ y=”125″ width=”125″ height=”125″ fill=”#333333″ stroke=”none”/>   </mask> </defs> <rect width=”250″ height=”250″ mask=”url(#maskQuadrant)” fill=”#ff0000″ stroke=”#000000″ stroke-width=”4″/>