Css SVG徽标：图像vs背景vs内联

我知道这个问题可能被认为是基于意见的，但我还没有在网上找到任何答案，我想知道每个解决方案的优缺点！ 我想以svg格式显示徽标，但在以下两种格式之间犹豫了很久：

1-

：IE9+这对我来说很好

2-

+自己的css

3-

：1 HTTP请求减去：D

哪一个是最好的，为什么

---

非常感谢

最好像需要戳东西一样使用背景，这样您就不需要使用开发人员或爬行到代码中。最好通过样式设置网站的整个视觉部分

1：

这将把您的

svg

文件加载到

img

标记中，该标记将+1个请求添加到您的请求总数中

2：

如果你想给出你自己的CSS，那么你的请求总数也应该是+1

3：

必须有.AI文件才能将其转换为svg代码。 这将与您的代码一起加载

---

如果您关心网络请求，最好将徽标包含到svg代码中。如果没有关系，那么您可以将其包含到CSS中，因为其他开发人员不必担心svg代码。

#1需要

http

请求#3将使您的文档膨胀，因为它不会被缓存。使用#2。将SVG转换为base64，并使用CSS将其设置为背景。这结合了缓存的优点，将您的http请求总数减少了1。@Ihazkode为什么#3不使用缓存。html也应该被缓存。b64编码->尺寸x1.34。操作：这取决于每种情况，但是如果你有很多东西的话，单色图标还有一种可能性，那就是创建一种网络字体。谢谢你们的回复和反应：）我也读过关于将图像设置为背景并用base64转换的文章，但这篇文章让我有点怀疑：：感谢你们的回复。我确实有.ai格式的徽标。对于解决方案2：我认为即使它加载到我的CSS文件中，也会有一个请求，不是吗？我目前使用的cdn使用的是HTTP2，我还应该关心http请求吗？哦。。对那也是。嗯，这取决于你是否想要+1请求。我建议使用svg代码。如果真的很重要，谢谢你的回复。对不起，我真的不明白你的意思@Websphere我的意思是，站点的所有可见部分都必须写入css文件（bg和其他规则）@Websphere使用bg作为徽标图像