SVG file is not showing in Chrome browser - html

Question

I don't Know much about SVG stuff and recently I come up with this problem
the SVG files are showing when we paste its code in the HTML file
I have seen many youtube videos in which they use <img> tag to emmet the SVG file in the browser
but I don't know is browser a problem for this or not but when I try to emmet the SVG file using <img>
tag I just don't show up on the page but works when pastes its code.
Can anyone tell me ho can I emmet the SVG file to my chrome browser using <img> or any other way but not pasting the whole SVG code in the HTML file because it is annoying and also not looks pretty good.
Edit:-
currently, I am making a navbar model which is in the left-hand side
I referred to this video I know it this video he used full SVG code to emmet the SVG image but in normal I searched for inserting the SVG image in those tutorials they used <img> and I also want to use <img> tag because without that I have to pass whole tons of lines of code which is very difficult to handle
my navbar is like this:-
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-items">
<a href="#" class="nav-link">
<svg> Here I want to use img tag instead of the whole svg code</svg>
<span>Name of SVG</span>
</a>
</li>
</ul>
</nav>
i just want to use <img> tag to insert the svg image , not writhing the svg code and that's what I am unable to do.

Answer 1

To use an svg in an <img> tag, use the src attribute with the path of your svg.
Example:
<img src="/path/to/svg.svg">
That should display your svg in your browser.
An alternative to that is just to use an <svg> tag in your HTML.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Here is a link to a w3schools tutorial that might help.