SVG file is not showing in Chrome browser

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.

Solution

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.