Can only click edges of svg image?

Question

Essentially the problem I am having is that I have three icons for social media all three are an Scalable Vector Graphic however when linked to there respective websites, I can only click the edges of the SVG Image, in other words I am unable to click the image itself just the outside of it.

Low Quality Youtube Video of the issue below:

https://www.youtube.com/watch?v=HlcT0N0If0k

Any help is greatly appreciated.

Thanks

  .icons{

    left:692px;
    top:64px;
    z-index: 1000;
    position:fixed;
    opacity: 0.3;
    letter-spacing: 38px;
    display:block;

  }

  .u--svg-inside {
	position: relative;
	display: inline-block;

	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
  	}

  	object {
		width: 100%; // Optional
  	}
}

<div class="icons">

<a href="https://twitter.com/AndrewMcCaughey" target="_blank" class="u--svg-inside">
<object data="img/twitter.svg" style=";height:25px;" type="image/svg+xml"> <img src="twitter.png" /> </object>
</a>

<a href="https://uk.linkedin.com/in/andrew-mccaughey-160815b8" target="_blank" class="u--svg-inside">
<object data="img/linkedin.svg" style=";height:25px;" type="image/svg+xml"> <img src="linkedin.png" /> </object>
</a>

<a href="https://www.youtube.com/channel/UCVV5Bb6eflSDhLboZK-UVjw" target="_blank" class="u--svg-inside">
<object data="img/youtube.svg" style=";height:25px;" type="image/svg+xml"> <img src="youtube.png" /> </object>
</a>

</div>

Answer 1

The problem is that the object within the a element is "overriding" the pointer/click events.

To fix this, just add this CSS rule:

a object{
  pointer-events: none;
}

Why can only click on the edge of the SVG image?

You're actually clicking on the a element not the SVG, the a is a little bit bigger, thats why you can click it only on its edge.

Hope this helps.