SVG Element

SVG element defines a shape that can be used to mask or clip elements in an SVG image. The clipped elements are only visible within the region defined by the clipPath.

Syntax

<svg>
    <defs>
        <clipPath id="myClip">
            <rect x="20" y="20" width="50" height="50"/>
        </clipPath>
    </defs>
    <circle cx="50" cy="50" r="30" clip-path="url(#myClip)" />
</svg>

• The clipPath element is defined inside the section of an SVG image.
• It is assigned an id so that it can be referenced later.
• The shape to be used as a clipping path is defined inside the clipPath element. In this example, it is a rectangle.
• The clip-path attribute is used to apply the clipping.

Attributes

The important attribute of the element includes:

• clipPathUnits: This attribute defines the coordinate system used for the clipPath element. It can have two values: userSpaceOnUse, and objectBoundingBox.

Example

Suppose you want to create a circle with a portion clipped off, you can use the element to create a mask.

<svg>
    <defs>
        <clipPath id="myMask">
            <rect x="0" y="0" width="200" height="200"/>
            <circle cx="100" cy="100" r="50"/>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="#ff0000" clip-path="url(#myMask)"/>
</svg>

• A rectangular shape is defined inside the mask first because SVG clipping requires a clipping path to begin with a rectangle.
• A circular shape is defined within the rectangle using the element.
• The rectangle and circle are combined into a single clipping path using the element.
• The clipping path is then applied to the rectangular shape using the clip-path attribute.

Conclusion

SVG element is a powerful tool for masking and clipping elements within an SVG image. By defining the clipping region within a element, you can specify the exact shape of the clipping region you need and then apply it to the elements within your image.