
It’s 3:1. But show as 1:1. It’s a SVG.

The style of logo elements are as same as here
Edit: Same without any components
Edit#2: It’s caused by svg’s viewBox. How can I make a svg compatible with Discourse?
The discussion revolves around an issue with a mobile logo appearing distorted. SettingDust shared images of the issue and revealed that the logo is a 3:1 SVG, but appears as 1:1. They discovered that the problem is caused by the SVG’s viewBox. awesomerobot suggested editing the viewBox, and awesomerobot later found that removing the viewBox and specifying the height and width instead resolves the issue. However, SettingDust found that specifying a max-height for the img tag works, but a generated value causes issues. Ultimately, SettingDust concluded that the viewBox uses relative values, while specifying width and height uses absolute values, and thanked awesomerobot for their help.

It’s 3:1. But show as 1:1. It’s a SVG.

The style of logo elements are as same as here
Edit: Same without any components
Edit#2: It’s caused by svg’s viewBox. How can I make a svg compatible with Discourse?
maybe try editing the svg’s viewbox? based on the screenshot I’d guess that despite the logo being 3:1 the viewbox is 1:1?
The width & height of viewbox is 3:1. And it’s ok on desktop
I tried a few things out, and it looks like the viewbox is causing issues… if I instead move those values to height/width and remove viewbox, it works the same on desktop and mobile.
So, opening up the svg in a text editor and changing the second line from:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">
to:
<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">
I’ll have to look into why that’s different on mobile…
It’s ok when I specific the max-height of img to height. But it’s seems that a value been generated. So I don’t think it’s a solution ![]()
It’s seems that the width & height specific a absolute value. But the view box more like a “relative” value.
And it’s ok. Thanks a lot ![]()