当我直接打开索引文件时，没有出现svg

如何解决当我直接打开索引文件时，没有出现svg

我有一个网站。文件结构如下：
-index.html
-imgs
--sprite.svg

当我使用vscode中的实时服务器在端口上打开站点时，出现svg。

但是当我直接从文件中打开它时，它不会出现。

index.html中的svg代码如下：

<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>

我不明白原因？

解决方法

尝试一下：

首先，您需要使用图标加载精灵
<object type="image/svg+xml" data="imgs/sprite.svg"></object>

然后使用精灵中的图标

<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>

更新

如@ by-brt所评论

我在哪里写这段代码

将代码添加到Index.html

<!DOCTYPE html>
<html lang="en"> 
<body>
<object type="image/svg+xml"  data="imgs/sprite.svg"></object>
<div>
<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>
 </div> 
</body>
</html>

在浏览器无法呈现SVG时显示的PNG文件。因此，将您的svg转换为png。如果您在here.

的Windows上，则可以在Windows商店中获取图像转换器。

如果使用linux，则可以使用imagemagics将文件从svg转换为png。