Warum ist mein mobiles Logo seltsam?

image
Es ist 3:1. Wird aber als 1:1 angezeigt. Es ist ein SVG.
image

Das Design der Logoelemente ist dasselbe wie hier.

Edit: Gleiches ohne jegliche Komponenten.

Edit#2: Es liegt am viewBox des SVG. Wie kann ich ein SVG mit Discourse kompatibel machen?

Vielleicht versuchst du, die viewBox des SVGs zu bearbeiten? Basierend auf dem Screenshot würde ich vermuten, dass die viewBox im Verhältnis 1:1 ist, obwohl das Logo im Verhältnis 3:1 ist?

Die Breite & Höhe des Viewbox-Verhältnisses beträgt 3:1. Auf dem Desktop ist das in Ordnung.

Ich habe ein paar Dinge ausprobiert, und es sieht so aus, als ob die viewBox Probleme verursacht… Wenn ich diese Werte stattdessen in height/width verschiebe und die viewBox entferne, funktioniert es auf Desktop und Mobile gleich.

Also öffne ich die SVG-Datei in einem Texteditor und ändere die zweite Zeile von:

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

in:

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

Ich muss noch herausfinden, warum das auf Mobile anders ist…

Es ist in Ordnung, wenn ich die max-height des Bildes auf height setze. Aber es scheint, als würde ein Wert generiert. Ich denke also nicht, dass das eine Lösung ist :smiley:

Es scheint, als gäbe Breite und Höhe einen absoluten Wert an. Die Viewbox hingegen ist eher ein “relativer” Wert.
Und das ist in Ordnung. Vielen Dank :smiley: