Masks and clipping paths both let you crop an element into a custom shape; however they are distinct and work differently.
A mask uses an image, such as an SVG, PNG, or WEBP file, that supports transparency and any transparent pixels in that image are removed from the element you apply the mask to.
A clipping path uses a set of coordinates or points to define the exact shape you want to crop the element into, without needing an image file.
Using a Mask
Select the element you want to crop.
Open the Mask option and choose an image file (SVG, PNG, or WEBP).
Set the sizing behavior:
Cover fills the element with the mask image.
Contain fits the whole mask image inside the element. If the image is smaller than the element, it may repeat, so choose Repeat or No Repeat depending on the look you want.
Set the position, such as center, left, right, top, or bottom, or enter a custom value.
For finer control, open Mask Position and Mask Size. You can enter values as a percentage (for example, 10 percent of the element) or in pixels.
Using Repeat with a small mask image is a common way to create a repeating decorative pattern.
There is no single correct setting. Adjust cover, contain, position, and size until the result looks right for your design.
Using a Clipping Path
Select the element you want to crop.
Open the Clip Path option and click Browse to open the shape library.
Choose from the available shapes, including squares, circles, rounded rectangles, triangles, and other preset shapes.
How Clip Path Coordinates Work
Custom clip paths are defined as a polygon made of coordinate pairs, separated by commas. Each pair is written as x-position, y-position, where both values are typically percentages of the element's width and height.
For example, a polygon might be built from points and, together, these points connect to form the custom shape. You can adjust any coordinate to reshape the polygon to fit your design.