SVG 徽标有不需要的白色 space above/below，仅在 Google 网站管理员工具页面缩略图中

Question

我已将我的 website 提交到 Google 的网站管理员工具，但我遇到了一个奇怪的问题。内嵌 svg 的徽标会破坏缩略图上的布局。它在任何现代浏览器中都没有问题（在 FF、Webkit/Vivaldi/Chrome/Safari、Edge 中测试）。同样的行为也出现在移动可用性预览中，其中徽标几乎位于屏幕底部边缘下方。 Bing 网站站长工具中也会出现同样的情况。

至于这只是缩略图的问题我不应该担心，但我想修复它。
徽标在 div 中，平板电脑 + 上的宽度为 25%，较小的宽度为 100%，因此它会自动缩放。

有没有办法调试呢？或者标志代码不正确？

<h1>  
  <a title="page title" href="/">
    <svg version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="53 450 276 94" enable-background="new 53 450 276 94" xml:space="preserve">
      <title/>
      <desc/>
      <path/>
    </svg>
  </a>
</h1>

Answer 1

所以，我找到了这个错误报告：Bug 82489 - SVG Inline content incorrectly sizes

根据它，我将 style="max-height: 100%" 应用于我的 SVG，这修复了所有缩略图和一些 Android 浏览器。所以看起来这个错误仍然存在。

固定码:

<h1>
  <a title="page title" href="/">
    <svg version="1.1" style="max-height:100%;" x="0px" y="0px" width="100%" height="100%" viewBox="53 450 276 94" enable-background="new 53 450 276 94" xml:space="preserve">
      <title/>
      <desc/>
      <path/>
    </svg>
  </a>
</h1>

SVG 徽标有不需要的白色 space above/below，仅在 Google 网站管理员工具页面缩略图中

SVG logo has unwanted white space above/below, only in Google Webmasters Tools page thumbnail

css

html

svg

google-search-console