How do I remove the "open image in new tab" thing? - html

Question

So I'm making a website, and I just wanted to know, how do I get rid of this open image in new tab. it should look like this:
image
i did some digging around and on my website, Lunift, in the footer, there are some images. If you right click them, the "open image in new tab" isn't there. Here is the code I used:
<svg height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg>
I mean, I copied that so that doesn't mean I know. but please help
Edit 1:
What I mean is how do I make it so that when somebody right clicks on a image on my site, it doesn't say "Open image in new tab."

Answer 1

Export your SVG code to an external file.
For example: foo.svg
Then wherever you want to display the image, for example in a div element, do this;
<div style="background-image: url('/foo.svg');
width: 100%;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;"></div>
Don't forget to change foo.svg and height:60px to suit you.
Open image in new tab will no longer be available in your related div element.
Using style tag on div is optional.
and add style in css
.foo {
...bar
}
you can use as.

Answer 2

Save your svg file and use it in the tag like this
<img class='randomClass' src='./image.svg' alt='image' />
Try styling the image like this
.randomClass{
pointer-events: none;
}

Answer 3

if you have a css file just do
svg {
pointer-events: none;
}
if you don't have a css file, i recommend to use one but also you can just use inline styles
<svg style={pointer-events: none;} height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg>