您好，欢迎来到Stackoverlow！在这种情况下，没有一刀切的方法，所以方法取决于用例，然而，我将分享 * 我的 * 意见，因为我在早期也想知道同样的事情。
您可以通过以下方式使用SVG：

**使用img标签将其作为图像放置。**此场景的主要优点是您将文件放置在文件夹中，只需使用img标记链接到该文件夹即可。根据文件的数量，它 * 可能 * 增加网站负载，因为加载所有图标需要多个HTTP请求。
**将SVG代码内联。**与将其作为图像标签放置相比，这具有相当多的优点。在内联代码中，您可以直接在SVG内容上使用CSS类，因此您可以更改填充颜色，或使用过渡进行动画，这非常有用。缺点是，它不容易维护，而且它有点扼杀了可重用性。
**将SVG作为CSS背景。**将SVG转换为可以作为CSS背景的格式需要一些努力，但有编码器工具可以帮助您做到这一点。主要优点是可重用性-使用CSS类放置它。但是，您不能像内联SVG代码时那样操作内容，但是您可以使用一些过滤器来更改不透明度或更改为黑色或白色（分别为filter:brightness(0)和filter：brightness（0）invert（1）），以满足用户需要与元素交互的情况，即悬停效果。 **使用多个SVG作为图标字体。**使用像icomoon这样的工具，您可以在字体中放置多个SVG图标，就像FontAwesome中使用的那样。缺点是它只允许每个图标使用一种颜色，但它们很容易使用类实现，当需要交互时，您可以使用简单的CSS属性实现各种效果，如color;font-size允许您轻松地操纵大小，并且使用text-shadow的额外好处是提供与 *masked*box-shadow`类似的准确阴影。最大的缺点是它们更难维护。..每当你需要一个新的字体图标，你需要实现和导出一个新的图标字体。

正如你所意识到的，每种情况下都有很多优点和缺点，这在很大程度上取决于你的用例。你想为UI图标使用很多SVG吗？使用图标字体。想要一个你需要与之互动的多色徽标吗？使用inline SVG。要用作静态内容吗？使用img标记。需要几个图标的网站，不关心颜色？使用CSS背景。