Chrome 浏览器中未显示 SVG 文件

Question

我不太了解 SVG 的东西，最近我想出了这个问题当我们将其代码粘贴到 HTML 文件时，SVG 文件会显示出来我看过许多 youtube 视频，其中他们使用 <img> 标签在浏览器中嵌入 SVG 文件但我不知道浏览器是否是这个问题，但是当我尝试使用 <img> 对 SVG 文件进行 emmet 时标签我只是不显示在页面上，但在粘贴其代码时有效。

谁能告诉我我可以使用 <img> 或任何其他方式将 SVG 文件 emmet 到我的 chrome 浏览器，但不要将整个 SVG 代码粘贴到 HTML 文件中，因为这很烦人，而且看起来也不太好。

编辑：-

目前，我正在制作左侧的导航栏模型我提到了 this video 我知道这个视频他使用完整的 SVG 代码来嵌入 SVG 图像，但通常我在他们使用的那些教程中搜索插入 SVG 图像 <img> 我也想使用 <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>

我只想使用 <img> 标签插入 svg 图像，而不是扭动 svg 代码，这是我无法做到的。

Answer 1

要在 <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 是一个 link 的 w3schools 教程，可能会有帮助。

Chrome 浏览器中未显示 SVG 文件

SVG file is not showing in Chrome browser

html

svg

vector-graphics