Svg mobile logo scales incorrectly

[Stephen]

If we use an SVG in the mobile_logo then it’s scaled incorrectly:

I can (and will) swap to a PNG for now, but would prefer not to!

Assuming it could also be fixed with a CSS tweak, but I can’t be the only person attempting this.

[piffy]

I use an SVG logo and I have not had scaling issues. Maybe I’m not understanding the issue, is it that it’s too small?

I would just note the 3:1 aspect ratio as suggested in the settings

Does your SVG image have excessive transparency padding the logo?

[Stephen]

It asks for an aspect ratio greater than 3:1. A PNG file with the same proportions works fine, so this issue relates specifically to handling of the SVG.

As an SVG no, it’s a vector and has no real concept of size in this context. The same file renders fine as the site logo.

The image in my screenshot is a test after spotting the problem on a production site. I created a comparable line of text, converted it to outlines and exported the object. If the file had any issues it would also be observed in the site logo. There’s zero padding:

Looking at this closer, your site handles the svg logo differently, probably through the theme:

Whereas this site is running one of the defaults, and looks like this:

Looks like your logo was produced by Inkscape and the dimensions were hard-coded within the file. That’s not typical of all SVG generators:

vs

If it works with the desktop view we just need similar treatment for the mobile logo.

[Canapin (Coin-coin le Canapin)]

@Stephen

your site

@Stephen

Looks like your logo was produced by Inkscape and the dimensions were hard-coded within the file.

Are you talking about @piffy’s forum and logo? I don’t find this info provided on the topic, this is a bit confusing

Can you provide your “test svg logo” so I can have a look?

[Stephen]

@Canapin

Are you talking about @piffy’s forum and logo? I don’t find this info provided on the topic, this is a bit confusing

Yes - they referred to their site so I compared as a reference.

SVG isn’t authorized for posting on meta. Here’s the source:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
    </style>
  </defs>
  <path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
  <path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z"/>
  <path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
  <path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
  <path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
  <path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z"/>
  <path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
  <path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z"/>
  <path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
  <path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
  <path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
</svg>

[Canapin (Coin-coin le Canapin)]

Thanks!

I can repro the issue.

Desktop:

Mobile:

The size of the logo is set by

.d-header .title {
    min-width: 36px;
}

And it will be set to 0 if no size is hardcoded in the SVG code apparently. For example, I removed the width and height values from Discourse’s logo, and here’s the result:

I fail to see why it works on desktop though, in this case.

[Canapin (Coin-coin le Canapin)]

I tried to pinpoint the issue and I think I figured it out.

The SVG is inside a flexbox child <a class="title"> which won’t grow depending on the content by default. Without set dimensions on the SVG file, it sees no “reason” to grow, hence a default width of 0px.

If you allow the logo’s container to grow, it fixes the issue:

.d-header .title:not(.title--minimized) {
    overflow: hidden;
    flex-grow: 1; // added
}

[piffy]

Thanks for the thorough breakdown! Indeed I did use Inkscape. Putting my site in safe mode yields the same CSS so I don’t think it’s from a theme or plugin:

Regardless, it seems that the CSS is a bit of a red herring and the SVG dimensions are the culprit here. I was also able to reproduce your issue by removing dimensions.

[awesomerobot (Kris)]

I’m going to test this a little more, but it seems like a good solution… thanks for figuring it out. My main concern with flex-grow is how it might interact with sibling header elements that are sometimes added in themes, but it looks like it works fine by default!

This issue doesn’t happen on desktop because we have a height specified

.d-header #site-logo {
  height: 2.667em;
}

On mobile we assume that the logo is probably larger than the space available, and constrain it to fit:

.d-header #site-logo {
  max-height: 2.4em;
  max-width: 100%;
}

So dimensionless SVGs on desktop are given a dimension in CSS, and on mobile we let the logo determine its size (limited by max-height or max-width, whichever comes first). So given no dimensions and no directive to grow larger, it stays tiny (as dictated by the min-width on .title, without that it’s invisible!).

Another possible fix is to update the mobile logo max-height to height. That would be consistent with how logos are treated on desktop.

I’ll probably get a fix in for this tomorrow, but in the meantime adding dimensions to the SVG is an easy fix, it doesn’t even have to be an accurate dimension… if you throw on width="1000" and nothing else it will grow to fit the space and have its max size constrained by CSS.

[Stephen]

The tricky bit is that the app which was producing dimensionless SVGs is Illustrator. I just used a PNG for now, and it will be fixed soon. I can’t imagine telling anyone to throw their vector into a text editor to alter it hah

[awesomerobot (Kris)]

Yes, I guess it’s kind of the point of SVGs to not have dimensions, but it has introduced a little bit of a complication that image tags didn’t have previously!

They can be exported from Illustrator with dimensions if the responsive box is unchecked in the SVG options modal (this is from file → export → export as):

(Another issue that I’ve run into that can be avoided in the export modal… If you’re embedding an SVG image directly on the page as markup it can also help to switch the styling to inline, otherwise styles from different SVGs can clash because they’ll likely use the same Illustrator class names)

[Stephen]

I can try telling them they’re doing it wrong, but that still probably wouldn’t answer why it’s fine on desktop and not on mobile

[awesomerobot (Kris)]

I’ve just merged a fix in here that will solve this, and generally makes the desktop/mobile logo CSS more consistent

UX: ensure header logo has dimensions, style clean-up

[Stephen]

Wonderful, thanks @awesomerobot