Create An SVG Image Mask
This is the code that I'm using to make makes for images with SVG
-
show this with just a single image first
This example shows how to make a transparent hole in one image to show an image below it
The process is to make a mask with two rectangles in it. One white, one black.
The white rectangle defines the area that will show. Anything that's black is transparent.
Since the black comes after the white it's on top which means it makes the area transparent
The background image is placed before the foreground in the code which means it's behind it
By applying the mask to the foreground image with url(#main-mask) the background image shows through where the transparency is