问题描述
我对SVG知识了解不多，最近我想到了这个问题
当我们将其代码粘贴到HTML文件中时，将显示SVG文件
我看过许多youtube视频，其中它们使用<img>标签在浏览器中表示SVG文件
但是我不知道浏览器是否对此有问题，但是当我尝试使用<img>来模仿SVG文件时
标签，我只是没有显示在页面上，但是在粘贴其代码时可以使用。
任何人都可以告诉我，我可以使用<img>或其他方式将SVG文件限制到chrome浏览器中，但是不能将整个SVG代码粘贴到HTML文件中，因为这很烦人，而且看起来也不太好。
编辑：-
目前，我正在制作左侧的导航栏模型
我提到过this video，我知道这个视频他使用了完整的SVG代码来模仿SVG图像，但是通常我会在他们使用<img>的那些教程中搜索插入SVG图像，并且我也想使用{ {1}}标签，因为如果没有它，我必须传递大量难以处理的代码行
我的导航栏是这样的：-
<img>我只想使用<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>
标记来插入svg图像，而不要破坏svg代码，这是我无法做到的。
解决方法
要在<img>标记中使用svg，请在svg路径中使用src属性。
示例：
<img src="/path/to/svg.svg">
这应该会在浏览器中显示您的svg。
一种替代方法是仅在HTML中使用<svg>标签。
示例：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Here是指向w3schools教程的链接，该链接可能会有所帮助。