moped moped - 5 months ago 13
CSS Question

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

I have submitted my website to Google's Webmasters Tools and I am experiencing strange problem. Logo that is inlined svg breaks layout on thumbnail. It has no problems in any modern browser (tested in FF, Webkit/Vivaldi/Chrome/Safari, Edge). The same behaviour is in mobile usability preview, where logo is nearly below bottom edge of screen. The same happens in Bing Webmasters Tools.

As far as it's only a problem of thumbnail I shouldn't be worried, but I'd like to have it fixed.

Logo is in div with 25% width on tablet+, 100% for anything smaller, so it scales automatically.

Is there a way how to debug it? Or is the code for logo incorrect?

<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>


Google Webmasters Tools page thumbnail

Answer

So, I found this bug report: Bug 82489 - SVG Inline content incorrectly sizes

and according to it, I applied style="max-height: 100%" to my SVG and this fixed all thumbnails and some Android browsers too. So looks like this bug is still present.

Fixed code:

<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>