| Posted under Articles

How to make an SVG mask for an image

There are some cases where you may need to “mask” an image with a shape.
There is the clip method of CSS but it is not supported by all browsers yet.

So If you have a square or round shape you can actually use an html element and place the image as a background.

But what happens when we need an irregular shape? In this case we can use an SVG.

So first step is to create your SVG shape as you would normally do. In my case the shape is as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="232.5" preserveAspectRatio="xMinYMin meet" viewBox="0 0 232.5 277.75" class="svg"> 
 <path d="M150.3 277.75H0V0h232.5" fill="#000"/>
</svg>

Note that i am using the preserveAspectRatio="xMinYMin meet" in order to have the SVG resizable.

Now all we have to do is create a pattern with the image and use that one as a fill on the path:

<defs><pattern id="svg-bg-img" patternUnits="userSpaceOnUse" width="100%" height="100%"><image xlink:href="https://images.unsplash.com/photo-1492201722955-33e840ece203?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=757a98133d3a18315b155732ea6932ef" x="0" y="0" width="100%" height="100%"/></pattern></defs>

You may see the complete code on the example below:

See the Pen SVG mask by Lab21 (@lab21) on CodePen.

Thanks for your likes, this will motivate me to write posts more often!