SVG 徽标作为图像与背景与内联答案

【问题标题】：SVG Logo as image vs background vs inlineSVG 徽标作为图像与背景与内联
【发布时间】：2017-08-30 20:04:52
【问题描述】：

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

1- <img src="logo.svg" ... />: IE9+ 适合我

2- <a href="#" id="logo">Company</a> + 自己的css

3- <svg ...><path ...>: 1 个 HTTP 请求少 :D

哪一个最好，为什么？

非常感谢

【问题讨论】：

#1 需要http 请求。 #3 会使您的文档膨胀，因为它不会被缓存。使用#2。将 SVG 转换为 base64 并使用 CSS 将其设置为背景。这结合了缓存的好处并将您的总 http 请求减少了 1。
@Ihazkode 为什么#3 不使用缓存？ .html 也应该被缓存。 b64 编码 -> 大小 x 1.34。对 OP：这将取决于每种情况，但单色图标的另一种可能性，如果你有很多是创建一个网络字体。
感谢大家的回复和反应:) 我还阅读了关于将图像设置为背景并将其转换为 base64 的内容，但这篇文章让我有点怀疑：dev.mobify.com/blog/data-uris-are-slow-on-mobile:S

标签： css svg

【解决方案1】：

最好使用背景，就像您需要戳东西一样，然后您就不需要使用开发人员或爬入代码。网站的整个视觉部分最好由样式设置

【讨论】：

【解决方案2】：

1：

<img src="logo.svg" alt="..." />

这会将您的 svg 文件加载到 img 标记中，这将是您的请求总数中的 +1 请求。

2：

<a href="#" id="logo">Company</a>

如果您想提供自己的 CSS，那么您的请求也可以为请求总数 +1。

3：

<svg ...><path .../></svg>

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

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

【讨论】：

感谢您的回复。我确实有 .ai 格式的徽标。对于解决方案 2：我认为即使它已加载到我的 CSS 文件中也会有一个请求，不是吗？我目前正在使用一个使用 HTTP2 的 cdn，我还应该关心 http 请求吗？
哦.. 是的.. 那也是。好吧，这取决于你是否想要 +1 请求。我建议使用 svg 代码。如果它真的很重要。