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

<clipPath>

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.

Attribute	Purpose	Value	Default
clipPathUnits	Define the coordinate system for the contents of the clip path.	objectBoundingBox | userSpaceOnUse	userSpaceOnUse
id	Unique identifier.	name

Examples

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

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

Text can be used as a clip path.

<mask>

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:

Attribute	Purpose	Value	Default
height	Control the height of the offscreen buffer.	number	120%
id	Unique identifier.	name
maskContentUnits	Define the coordinate system of the contents of the mask.	objectBoundingBox | userSpaceOnUse	userSpaceOnUse
maskUnits	Define the coordinate system of the height, width, x and y.	objectBoundingBox | userSpaceOnUse	objectBoundingBox
width	Control the width of the offscreen buffer	number	120%
x,y	x- and y-coordinates of the upper left corner of the rectangle defining the largest offscreen buffer	number	−10%

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

Examples

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

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