I am talking about the image in the second section of link on this HTML page. and here is the link of the original image.
when you inspect the HTML page you can see, I am using the same image as the link given, and still, the hand in the image is not showing, I tried to do resizing and everything on inspect so that the hand in the image become visible but not working. I thought it is an issue of z-index but I checked everything z-index is fine, the border part of the hand is visible.
I just saw with different Mac and safari browser the image is showing up with hand but in my system, Linux, and chrome browser the image is showing up without the hand.
<div class="col-lg-4 is-animated">
<img src="assets/images/2sec.svg" class="img-fluid" alt="">
</div>
Have a try using <object> tag:
<object type="image/svg+xml" data="https://www.thealphateam.digital/demos/pando/assets/images/2sec.svg">@Progu, Thanks for your answer, your answer was working but I started facing another problem with my javascript code, scrolling stopped working when I used an object tag to display image...
so I searched for more alternatives to display images apart from an image tag, and I found the Iframe method, it worked awesomely. but still, if someone knows why this was happening and can display it with the image tag can answer.
<iframe frameborder="0" scrolling="no" width="100%" height="100%"
src="assets/images/2sec.svg" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe><br />
Change the inline style style margin-left value.
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox" style="margin-left: 256px;">
And also the svg width="100%" and height="auto"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 540 471" fill="none">