How to Clip Images with Shapes in SwiftUI

Clipping images to shapes in SwiftUI opens up a world of creative possibilities for your app’s user interface. Whether you’re framing profile pictures or crafting custom icons, SwiftUI makes it simple and efficient.

In this blog post, we’ll explore how to clip images with various shapes, including rectangles, ellipses, circle and more.

Clipping Image with Rectangle

Starting with a classic shape, a rectangle can give your images a clean-cut look.

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(Rectangle())
    .frame(width: 200, height: 150)

Here, the clipShape(Rectangle()) modifier trims the image to a rectangular shape, while the frame modifier defines the size of the clipped image.

Clip Image with Circle

One of the most common shapes used for clipping images is the circle. This is often used for profile pictures or avatars in apps.

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(Circle())
    .frame(width: 100, height: 100)

In this snippet, Image is initialized with the name of the image file, made resizable, and then clipped using clipShape(Circle()). The frame modifier sets the size of the view.

Clip Image with Ellipse

An ellipse can add an elegant, softer look to your images compared to a rectangle.

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(Ellipse())
    .frame(width: 200, height: 300)

By using clipShape(Ellipse()), the image takes on an elliptical form, which can be a stylish way to display photos or backgrounds.

Clip Image with Capsule Shape

A capsule shape is essentially a rectangle with semi-circular ends, and it’s particularly great for creating button-like images.

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(Capsule())
    .frame(width: 300, height: 100)

The Capsule clip provides a modern and inviting look, perfect for interactive elements in your app.

Clip Image with Rounded Rectangle

If you want a rectangle with rounded corners, SwiftUI’s RoundedRectangle is the ideal choice.

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(RoundedRectangle(cornerRadius: 25))
    .frame(width: 200, height: 200)

With clipShape(RoundedRectangle(cornerRadius: 25)), the image is neatly clipped into a square with gentle, rounded corners, giving it a polished appearance.

Add Border to Clipped Shapes

After clipping an image to a shape, you might want to frame it with a border. This can be done using the overlay modifier along with the same shape used for clipping.

Image("dog")
    .resizable()
    .clipShape(Circle())
    .frame(width: 100, height: 100)
    .overlay(Circle().stroke(Color.white, lineWidth: 4))

The overlay modifier adds a white circular stroke around the clipped image, accentuating the shape with a stylish border.

SwiftUI’s .clipShape() modifier provides a straightforward approach to masking images with shapes. Whether you opt for the simplicity of rectangles, the smoothness of ellipses, the sleekness of capsules, or the soft edges of rounded rectangles, you can create a variety of aesthetic elements that enhance the visual appeal of your app.

By using these different shapes and understanding how to apply borders effectively, you can ensure that your images complement the rest of your app’s design, providing a seamless and engaging user experience.