Wenn wir ein SVG im mobile_logo verwenden, wird es falsch skaliert:
Ich kann (und werde) vorerst zu einer PNG wechseln, würde es aber vorziehen, dies nicht zu tun!
Ich gehe davon aus, dass es auch mit einer CSS-Anpassung behoben werden könnte, aber ich kann nicht die Einzige sein, die dies versucht.
Ich verwende ein SVG-Logo und hatte keine Skalierungsprobleme. Vielleicht verstehe ich das Problem nicht, ist es, dass es zu klein ist?
Ich würde nur das Seitenverhältnis von 3:1 wie in den Einstellungen vorgeschlagen beachten
Hat Ihr SVG-Bild übermäßige Transparenz, die das Logo umgibt?
Es verlangt ein Seitenverhältnis von mehr als 3:1. Eine PNG-Datei mit denselben Proportionen funktioniert einwandfrei, daher bezieht sich dieses Problem speziell auf die Handhabung der SVG.
Als SVG nein, es ist ein Vektor und hat in diesem Kontext kein wirkliches Größenkonzept. Dieselbe Datei wird als Website-Logo einwandfrei gerendert.
Das Bild in meinem Screenshot ist ein Test, nachdem das Problem auf einer Produktionsseite entdeckt wurde. Ich habe eine vergleichbare Textzeile erstellt, sie in Umrisse umgewandelt und das Objekt exportiert. Wenn die Datei Probleme hätte, würde dies auch im Website-Logo beobachtet werden. Es gibt keinen Abstand:
Wenn man sich das genauer ansieht, behandelt Ihre Website das SVG-Logo anders, wahrscheinlich über das Theme:
Während diese Website eine der Standardeinstellungen verwendet und so aussieht:
Es sieht so aus, als ob Ihr Logo von Inkscape erstellt wurde und die Abmessungen in der Datei fest kodiert wurden. Das ist nicht typisch für alle SVG-Generatoren:
vs
Wenn es mit der Desktop-Ansicht funktioniert, brauchen wir nur eine ähnliche Behandlung für das mobile Logo.
Sprichst du über @piffys Forum und Logo? Ich kann diese Informationen im Thema nicht finden, das ist etwas verwirrend 
Kannst du mir dein „Test-SVG-Logo“ zur Verfügung stellen, damit ich es mir ansehen kann?
Ja – sie haben sich auf ihre Seite bezogen, also habe ich sie als Referenz verglichen.
SVG ist auf Meta nicht erlaubt. Hier ist die Quelle:
<?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>
Danke!
Ich kann das Problem reproduzieren.
Desktop:
Mobil:
Die Größe des Logos wird durch Folgendes festgelegt:
.d-header .title {
min-width: 36px;
}
Und es wird anscheinend auf 0 gesetzt, wenn keine Größe im SVG-Code fest kodiert ist. Ich habe zum Beispiel die Werte für Breite und Höhe aus dem Discourse-Logo entfernt, und hier ist das Ergebnis:
Ich kann nicht verstehen, warum es in diesem Fall auf dem Desktop funktioniert.
Ich habe versucht, das Problem einzugrenzen, und ich glaube, ich habe es herausgefunden.
Das SVG befindet sich in einem Flexbox-Kind \u003ca class=\"title\"\u003e, das standardmäßig nicht entsprechend dem Inhalt wächst. Ohne festgelegte Abmessungen in der SVG-Datei sieht es keinen „Grund“ zum Wachsen, daher eine Standardbreite von 0px.
Wenn Sie zulassen, dass der Container des Logos wächst, behebt dies das Problem:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // hinzugefügt
}
Vielen Dank für die ausführliche Aufschlüsselung! Tatsächlich habe ich Inkscape verwendet. Wenn ich meine Website im abgesicherten Modus starte, erhalte ich dasselbe CSS, daher glaube ich nicht, dass es von einem Theme oder Plugin stammt:
Unabhängig davon scheint das CSS ein wenig irreführend zu sein und die SVG-Abmessungen sind hier das Problem. Ich konnte Ihr Problem auch reproduzieren, indem ich die Abmessungen entfernt habe.
Ich werde das noch etwas weiter testen, aber es scheint eine gute Lösung zu sein… danke, dass du das herausgefunden hast. Meine Hauptsorge bei flex-grow ist, wie es mit Geschwister-Header-Elementen interagieren könnte, die manchmal in Themes hinzugefügt werden, aber es scheint standardmäßig gut zu funktionieren!
Dieses Problem tritt auf dem Desktop nicht auf, da wir eine Höhe angegeben haben
.d-header #site-logo {
height: 2.667em;
}
Auf Mobilgeräten gehen wir davon aus, dass das Logo wahrscheinlich größer ist als der verfügbare Platz und schränken es ein, damit es passt:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Daher erhalten dimensionslose SVGs auf dem Desktop eine Dimension in CSS, und auf Mobilgeräten lassen wir das Logo seine Größe bestimmen (begrenzt durch max-height oder max-width, je nachdem, was zuerst kommt). Da keine Dimensionen und keine Anweisung zum größeren Wachstum vorhanden sind, bleibt es winzig (wie durch min-width auf .title vorgegeben, ohne das wäre es unsichtbar!).
Eine weitere mögliche Lösung ist, die max-height des mobilen Logos in height zu ändern. Das wäre konsistent damit, wie Logos auf dem Desktop behandelt werden.
Ich werde das wahrscheinlich morgen beheben, aber in der Zwischenzeit ist das Hinzufügen von Dimensionen zum SVG eine einfache Lösung, es muss nicht einmal eine genaue Dimension sein… wenn du width="1000" hinzufügst und sonst nichts, wird es wachsen, um den Platz auszufüllen, und seine maximale Größe wird durch CSS begrenzt.
Das Schwierige daran ist, dass die App, die dimensionslose SVGs erzeugt hat, Illustrator ist. Ich habe vorerst nur ein PNG verwendet, und das wird bald behoben sein. Ich kann mir nicht vorstellen, jemandem zu sagen, er solle seinen Vektor in einen Texteditor werfen, um ihn zu ändern 
hah
Ja, ich schätze, es ist irgendwie der Sinn von SVGs, keine Abmessungen zu haben, aber es hat eine kleine Komplikation eingeführt, die Bild-Tags bisher nicht hatten!
Sie können aus Illustrator mit Abmessungen exportiert werden, wenn das Kontrollkästchen für responsive Box im SVG-Optionsmodal deaktiviert ist (dies ist unter Datei → Exportieren → Als exportieren):
(Ein weiteres Problem, auf das ich gestoßen bin und das im Exportmodal vermieden werden kann… Wenn Sie ein SVG-Bild direkt als Markup auf der Seite einbetten, kann es auch hilfreich sein, das Styling auf Inline umzuschalten, da sich andernfalls Stile aus verschiedenen SVGs überschneiden können, da sie wahrscheinlich die gleichen Illustrator-Klassennamen verwenden)
Ich kann versuchen, ihnen zu sagen, dass sie es falsch machen, aber das würde wahrscheinlich immer noch nicht erklären, warum es auf dem Desktop funktioniert und auf dem Handy nicht 
Ich habe hier gerade einen Fix zusammengeführt, der dieses Problem lösen wird und generell die CSS für das Desktop-/Mobile-Logo konsistenter macht
Wunderbar, danke @awesomerobot
Dieses Thema wurde nach 2 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.
