Adding alpha mask to SVG - css

Question

I'm attempting to add an alpha mask to my SVG file but am having some problems. I couldn't find a way to do it with Illustrator, so instead I used Photoshop to add the alpha layer and resaved it as SVG. Looking at the SVG file itself, I don't see anything that would indicate there's an alpha layer, and I haven't been able to get it to work.
The effect I want is for you to only see the grey layer through the magnifying glass lens, instead it looks like this.
This is my Codepen:
https://codepen.io/TheNomadicAspie/pen/xxdaWOa
And here is the actual raw text of the SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="836" height="1032" viewBox="0 0 836 1032">
<image x="153" y="216" width="530" height="599" xlink:href="data:img/png;base64,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"/>
</svg>
What am I doing wrong?

Answer 1

SVGs don't have a background by default. So you shouldn't need to do anything to make the background areas transparent.
Given that, your statement "I'm attempting to add an alpha mask to my SVG file" doesn't really make much sense. It does not need a mask.
The example SVG you link to consists solely of a bitmap PNG image. But that image has a transparent background so it should work also. By that I mean that whatever you place the SVG in front of, should show through.
Note however that an SVG that consists solely of a bitmap image is pretty much pointless. You would be better just to use that bitmap directly. You are not getting any benefit from putting it inside an SVG file.
Update
Okay, so if you want to create an effect where an image is visible through the lens of your magnifying glass, then your mask image needs to be a circle that matches just the lens size and position, not the whole magnifying glass. In a mask image, white areas represent the part of the image you want to keep, and black areas are the parts you want to be transparent.
Like so.
This is the image that you ought to have had in your SVG.
However as I said, you're wasting the benefits of using an SVG if you just put a single large bitmap in it. You could use a small SVG like the following instead.
<svg xmlns="http://www.w3.org/2000/svg" width="530" height="599">
<!-- areas masked with black become transparent -->
<rect width="100%" height="100%" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</svg>
Your main magnifying glass isn't suitable as a mask, but it can be used as an image to be superimposed over the masked background. But again, that image could be a proper SVG (using vector shapes instead of a bitmap) and it would be a lot smaller.
But if you are going to use SVGs it would be simpler to use an SVG for the whole thing. Especially if you are planning to move the lens about.
The mask-image property has some restrictions, and can be tricky to use.
Here's an example of doing it entirely within an SVG.
svg {
width: 530px;
height: 599px;
}
<svg viewBox="0 0 530 599">
<defs>
<!-- Our circular lens mask -->
<mask id="lens-mask">
<!-- areas masked with black become transparent -->
<rect width="530" height="599" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</mask>
</defs>
<!-- Background image that we want to show through the lens -->
<image xlink:href="https://placekitten.com/530/599" width="530" height="599"
mask="url(#lens-mask)"/>
<!-- Magnifying glass image that we will lay directly over the top -->
<image xlink:href="https://i.stack.imgur.com/dvbYR.png" id="mag-glass"/>
</svg>
Update 2
I didn't add any movement to my last example, because you hadn't mentioned it in your question. I didn't want to complicate the example by adding unnecessary extras.
Here's an updated version which includes movement. Hopefully this helps.
var svg = document.getElementById("my-svg");
var magGlass = document.getElementById("mag-glass");
var lensCircle = document.querySelector("#my-svg #lens-mask circle");
svg.addEventListener("mousemove", moveLens);
function moveLens(evt) {
var mouseTransform = "translate(" + (evt.offsetX - 170) + "," + (evt.offsetY - 170) + ")";
lensCircle.setAttribute("transform", mouseTransform);
magGlass.setAttribute("transform", mouseTransform);
}
svg {
width: 530px;
height: 599px;
overflow: visible;
}
<svg viewBox="0 0 530 599" id="my-svg">
<defs>
<!-- Our circular lens mask -->
<mask id="lens-mask">
<!-- areas masked with black become transparent -->
<rect width="530" height="599" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</mask>
</defs>
<!-- Background image that we want to show through the lens -->
<image xlink:href="https://placekitten.com/530/599" width="530" height="599"
mask="url(#lens-mask)"/>
<!-- Magnifying glass image that we will lay directly over the top -->
<image xlink:href="https://i.stack.imgur.com/dvbYR.png" id="mag-glass"/>
</svg>