SVG Clipping and Masking

SVG Clipping and Masking

SVG elements can be clipped and masked.

The <clipPath> element is used to clip an SVG element.

The <mask> element is used to apply a mask to an SVG element.

SVG Clipping

Clipping is when you remove a part from an element.

For clipping, we use the <clipPath> element.

Every path/element inside a <clipPath> element is inspected and evaluated. Then every part of the target that lies OUTSIDE of this area will NOT be rendered. In other words: Anything outside the path is hidden and anything inside is shown!

The <clipPath> element is usually placed in a <defs> section. 

Let's look at some examples:

In this example, we create a red circle centered at (50,50), with radius 50:

Here is the SVG code:

Now we add a <clipPath> element with a single <rect> element. This <rect> element would cover the UPPER HALF of the circle. The <rect> will NOT be drawn; Instead, its size and position will be used to determine which pixels of the circle that will be shown. Since the rectangle covers only the upper half of the circle, the lower half of the circle will vanish:

Here is the SVG code:

SVG Masking

For masking, we use the <mask> element.

The <mask> element is used to apply a mask to an SVG element.

A mask is referenced with the mask attribute.

Here is a simple mask example:

Here is the SVG code:

The example above defines a mask with id="mask1". Inside the <mask> element there is a <rect> element. This <rect> element defines the shape of the mask.

The example also defines a <rect> element which uses the mask. The mask is referenced with the mask attribute.

The red rectangle should be 100 pixels high, but only the first 50 pixels vertically are visible. This is because the mask rectangle is only 50 pixels high. The rectangle is only visible in the parts covered by the mask rectangle.

The last <rect> element is just to show the size of the rectangle without the mask.

Here is another example that uses a <circle> element to define the shape of the mask:

Here is the SVG code:

Fill Color and Opacity

The fill color of the elements inside the <mask> element defines the opacity of the fill color of the element that refers to the mask.

In the examples above we have only used fill="white". In a mask, white is treated as an area that will be shown, and black is treated as an area to be masked.

A mask will be more opaque the closer the color is to #ffffff (white) and more transparent the closer the color is to #000000 (black):

Here is the SVG code:

Gradients in Masks

In this example the mask shape uses a gradient as a fill color:

Here is the SVG code: