SVG Masks

Rosie Elphick
Sep 4, 2018 · 4 min read

In this post I’ll be explaining how to create image masks right in our SVG code to create some cool, custom effects.

To start out, what is a mask? Masks are used to hide or reveal very specific portions of an image beneath the mask layer. Masks and clippings have a very similar effect, but whereas clippings work by defining what should be taken away from the image, masks work by covering the whole image and then defining what should be revealed. Masks are used a lot in Photoshop and other image editing software, but we can also use them right in our html and css. In this post, I’ll be explaining how to use masks inline in our SVG’s.

Original image (left), vs masked image (right)

Above to the left is our reference photo, with no editing or effects. On the right, is the same image but used in an SVG with a mask to cut out the unwanted background and just reveal the moon in the middle. Let’s take a look at the code!

I’m not going to touch on the <defs> tags, other than to say it is crucial that your mask opening and closing tags go inside them. Defs essentially just tells the SVG to remember the content between them. Between the mask tags, we define what section of the image we want to be visible. In this case, we define a circle, so we can see the earth through the mask.

It’s important to give the mask a unique ID, so we can refer to it later. At the bottom of the SVG, we define the background fill to be the moon image, and then we are referring to the mask we want to apply to this image by referencing the unique ID we gave it earlier.

Note that we are also defining the colour of the mask. If a mask is white (like in this example) the mask will be completely transparent, meaning we can see the image behind completely. If the mask was black, it would be completely opaque, and therefore we wouldn’t be able to see anything.

In the examples below, the code is identically except for changing the fill colour of the mask. As the fill colour gets darker and darker, the mask becomes more and more opaque.

fill = “white”
fill = “grey”
fill = ”darkslategrey”

In my opinion, one of the most useful things about SVG masks is their ability to create text masks. This example below was created in basically exactly the same method as the moon examples before, except in place of a circle within the mask tags, we define some text.

I think that this is the real utility of SVG masks. To create an effect like this, most people would presumably turn to Photoshop. By using SVG masks we’re saving that time, effort, and hassle of importing a separate file. Additionally, we can change the text in the mask, so this method is very flexible and customizable — so no re-editing involved every time you want to change the text! Lastly, because SVGs are by nature fully scalable, you don’t have to worry about importing a large, high definition, bulky image file in order to avoid pixelated content.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade