Clipping in CSS and SVG

Download & Demo

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to “clip” elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

Clipping in CSS – The clip-path Property

The clip-path property is part of the CSS Masking Module. The clipping operation has been a part of SVG since 2000, and has moved into the CSS Masking module so that it now allows clipping HTML elements as well as SVG elements.

The clip-path property is used to specify a clipping path that is to be applied to an element. Using clip-path, you can apply an SVG <clipPath> to an element by referencing that path in the property value. You can also define a clipping path using one of the basic shapes defined in the CSS Shapes module. These shapes can be created using shape functions. The shape functions available are polygon(), circle(), inset() (used to define inset rectangles), and ellipse().

Applying a clipping path to an element using the clip-path property is very simple and straightforward:

?

/* Referencing an SVG clipPath */ .element     clip-path: url(#svgClipPathID); /* Using a CSS basic shape function */ .element     clip-path: polygon(...); /* or one of the other shape functions */

For example, if we were to define a polygonal clipping path using the polygon() function, and then apply it to an image, the code would look like the following:

?

img

    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);




Clipping in CSS and SVG