SVG Masking Examples — Text And Image Masks - Vanseo Design |
| SVG Masking Examples — Text And Image Masks Posted: 21 Jun 2016 05:30 AM PDT Last week I showed you some masking examples where the mask was more than a rectangle, including a couple where the mask fill was a gradient or pattern. Perhaps even more interesting, you can add a mask on top of an image or use an image or text as the mask.
Today I want to share a few more examples working with text and images as the mask content. Hopefully you'll agree they're more interesting than masking a circle with a rectangle. Text MasksBefore we get started, here's the image I'll be using throughout this post. If you've followed along with this series, it should be familiar. It's an image of the Strawberry Fields Memorial in Central Park. Text is an interesting option for the content of a mask. A common use for a text mask is to place it over an image similar to using text as a clipping path. The mask clips the image outside of the text. In this first example, I created a text mask with the ever so original words Text Mask. I've given the text some basic properties like a font family, weight and size. I've filled it with a medium gray (#999).
The result is the image showing through the text. The values of the image that show through are a little lighter than in the original image as they're masked by the text fill, which is #999. More interesting would be to replace the solid fill color of the text mask with a pattern. Here I used the same pattern defined in last week's pattern example.
Hopefully you agree the result is a bit more interesting than the previous example with the solid fill. Firefox has an issue with the previous example. It doesn't seem to like adding the pattern to the text mask. Here's an image of the result in case you happen to be viewing this in Firefox  Instead of an SVG pattern, you can also fill the text mask with a gradient as I've done here, by borrowing the linear gradient I used last week.
Again the shape of the text clips the image and in this case applies a gradient mask so the text to the left is lighter than the text to the right. Similar to the previous example, Firefox doesn't like this one either. Here's an image if Firefox is the browser you're currently using.  Image MasksLet's reverse things and instead of adding a mask on top of an image, let's use the same image from the previous examples as the mask content. In this example I'm using the image of Strawberry Fields as the mask content. I placed three circles inside a group <g> and have their fill colors set to be red (#c69), green (#9c6), and blue (#69c). The image is used to mask all three as I added the reference to the mask on the group as opposed to adding it to any of the individual circles.
Here's the result and hopefully you can tell that a different part of the image masks each of the three circles. You don't have to add the mask to the group. You can also add masks to individual elements in the group. In this next example I added a second mask that uses the pattern from the earlier example. I added the same image mask to the group of all three circles, but added the pattern mask directly on the first circle in the group.
Here's the result. As you might expect, all three circles are masked by the image, but only the first circle is masked by the pattern. Take note that this example uses two different masks, one applied to the entire group of circles and one applied directly to the first circle in the group. It shows that you can use multiple masks in the same SVG. Closing ThoughtsThat brings me to the end of this series on SVG clipping and SVG masking. I hope you agree that both are relatively easy to work with. With either you define the clipping path or the mask in one location and then reference it in another. I think you'll agree that masks are more interesting than clipping paths. In fact a clipping path is really a mask with a solid fill of white (#fff). Masks become the most interesting when you use gradients and patterns as the fill or better use an image to mask another image or graphic element. I have another SVG series on filter effects planned for later in the summer, but I think it's time to switch topics. Next up is a series on Sass data types. I'll talk about numbers, strings, color, lists, and maps, and then close the series with a look at control directives in Sass Download a free sample from my book Design Fundamentals. Join me as I share my creative process and journey as a writer.      This posting includes an audio/video/photo media file: Download Now |
| You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |