I work with SVGs all the time and two of the most powerful features I use frequently are masks and clipPaths. It can be confusing to know which is best for your situation. In this quick tip, I’ll see if I can explain SVG masks and clipPaths simply and succinctly.
How they work
At first, it may seem like clipPaths and masks are the same because they both hide or reveal a portion of the image.
clipPath
Any path you place into a clipPath is going to reveal the underlying element or group. It makes no difference what color the fill is for the elements in the clipPath.
Masks
Masks, on the other hand, take into account not only the shape of the path in the mask element, but also the fill color. Anything filled with black will be completely hidden. Anything filled with white will be fully revealed. You can use any shade of gray between black and white for a gradient partial reveal.
Differences
Let’s take a look at a live example to see some of the differences. In the following demo, I’ve used the exact same elements in the mask and the clipPath. They have been applied to their respective groups revealing a simple image and text element. Directly below the two groups, I’ve also included a duplicate copy of the elements making up the mask and clipPath.
See the Pen Simple clipPath and mask static by Craig Roblewsky (@PointC) on CodePen.
The clipped group
The clipped group is completely revealing everything where I have the red and black squares as well as the green circle. What is not being revealed is the area under the white stroke of the circle. This is one of the major differences: clipPath will not include the stroke of any element you have in there.
The masked group
The masked group is showing varying levels of transparency for the green circle and red square. That’s because of the gradient effect we talked about at the beginning of this article. Green and red fall between black and white on the spectrum. Notice nothing is revealed behind the black square. What is fully opaque is the area being revealed by the white stroke on the green circle. Masks include the stroke of elements.
Pointer events
Another big difference is pointer events. clipPaths only register the pointer events on the parts of the elements that are revealed. Masked elements or groups accept the pointer event even in the transparent areas. Try running your mouse over the two groups in the above demo to see the difference.
Animated Examples
I’ve set up two more examples the same way. A masked group, clipped group and duplicate elements below each.
In the first, you can see the white rectangle reveals in exactly the same way for each group as it animates the width. The second rectangle with the gray stroke only works in the masked group. Since the stroke is gray, it’s only revealing part of the image below it. The clipPath ignores it completely.
See the Pen Simple clipPath and mask v2 by Craig Roblewsky (@PointC) on CodePen.
In the next example, I’ve used a gradient on the circle for the mask and a light blue circle in the clipPath. See how the white → black gradient reveals a nice feathered edge? Gradients only work in masks. (Note-I’m also animating the gradient stop for the full effect.) The blue circle reveals the clipPath perfectly. Again, the color of elements in clipPaths makes no difference. Using a gradient in a clipPath just causes the clipPath to laugh at you.
See the Pen Simple clipPath and mask by Craig Roblewsky (@PointC) on CodePen.
Side note: both demos above take advantage of GreenSock’s DevTools. You can use the scrubber to run the animation manually. There are also a bunch of controls to speed up or slow down the animations. Give it a whirl.
Final thoughts
So, which should you choose for your project? A clipPath is probably going to work well in most cases for simple reveals. However, if you want a gradient or stroke, the choice is easy. Use a mask.
I hope you learned a little something. Until next time, keep your pixels movin’.
