Is it possible to use an SVG to mask an image?

Is it possible to use an SVG to mask an image? I would like to use an svg of a heart to mask a photo, like this.
image-heart-mask
I appreciate your help.

1 Like

Also wondering if it’s possible to use an SVG to mask an image.

Yes.

Use a class like this:

 .cta--mask  {
        -webkit-mask-image:url(/wp-content/uploads/2022/11/cta-shape.svg);
        -webkit-mask-position:center center;
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-size:contain;
      
        mask-image:url(/wp-content/uploads/2022/11/cta-shape.svg);
        mask-position:center center;
        mask-repeat:no-repeat;
        mask-size:contain;
        overflow: hidden;
    }

You need to upload the svg shape you want to the medialib and fix the path.

based on Supamikes Tutorial: Masking images & videos in CSS