Почему мой логотип мобильного выглядит странно?

image
Счёт 3:1. Но отображается как 1:1. Это SVG.
image

Стиль элементов логотипа такой же, как здесь.

Редактирование: То же самое без каких-либо компонентов.

Редактирование #2: Это вызвано viewBox в SVG. Как сделать SVG совместимым с Discourse?

Может быть, попробуй отредактировать viewBox у SVG? Судя по скриншоту, я бы предположил, что, несмотря на то, что логотип имеет соотношение сторон 3:1, viewBox задан как 1:1?

Соотношение ширины и высоты viewbox составляет 3:1. На компьютере всё в порядке.

Я попробовал несколько вариантов, и похоже, что проблема в атрибуте viewBox… Если я вместо этого перенесу эти значения в атрибуты height/width и удалю viewBox, то на десктопе и мобильном устройствах всё работает одинаково.

Так что, открыв SVG в текстовом редакторе, я изменил вторую строку с:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">

на:

<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">

Мне ещё предстоит разобраться, почему на мобильных устройствах это работает иначе…

Это работает, когда я указываю max-height для изображения равным height. Но, похоже, генерируется какое-то значение. Так что я не думаю, что это решение :smiley:

Похоже, что ширина и высота задают абсолютное значение. Но view box больше похоже на «относительное» значение.
И это нормально. Большое спасибо :smiley: