Clipping

Creating cut-out effects in SVG is referred to as clipping and is made by creating a shape to use as a stencil, then applying that shape to the object being clipped. The stencil is referred to as a clipping path, and, when it is applied to an object, acts as a boundary that allows only part of the object inside the clipping path to be viewed.

Figure 7-1 shows a verse from “The Song of Wandering Angus,” by W.B. Yeats on the left side. On the right side, an oval clipping path is applied to the text verse. Only the part of the text that is within the oval clipping path's boundaries is visible.

Figure 7-1. CLIP01.SVG. On the left is a text verse; on the right is an oval clipping path applied to the text.

A clipping path such as the one in ...

Get SVG for Web Developers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.