Shopware 5 - Themes
ÜbersichtStoreTicket eröffnen
  • Shopware 5 - Themes Doku
  • Installation
  • Erste Schritte
  • FAQ
    • Erweitertes Menü
    • Bildgrößen im Listing
    • Probleme beim Kompilieren
    • Child Theme
    • Konfiguration exportieren / importieren
    • Eigenes CSS
    • SVG Logo wird nicht angezeigt
  • Stratus
    • Vorlagen Übersicht
    • Konfiguration
      • Grundeinstellungen
      • Typografie & Farben
      • Header Hintergrundbilder im Listing
      • Text Slider im Offcanvas Menü
      • Schriftarten editieren
      • Einkaufswelt überlagernden Header erstellen
      • Transparenten Header auf der Startseite
      • Schlagwortwolke im Footer
      • Währungs- und Sprachauswahl
  • Atmos
    • Vorlagen Übersicht
    • Konfiguration
      • Grundeinstellungen
      • Typografie & Farben
      • Header Hintergrundbilder im Listing
      • Text Slider im Offcanvas Menü
      • Schriftarten editieren
      • Einkaufswelt überlagernden Header erstellen
      • Transparenten Header auf der Startseite
      • Schlagwortwolke im Footer
      • Währungs- und Sprachauswahl
  • Gravity
    • Vorlagen Übersicht
    • Konfiguration
      • Grundeinstellungen
      • Typografie & Farben
      • Header Hintergrundbilder im Listing
      • Marketing Banner
      • Schriftarten editieren
      • Einkaufswelt überlagernden Header erstellen
      • Transparenten Header auf der Startseite
      • Ausklappbare Topbar
      • Schlagwortwolke im Footer
  • Sphere
    • Vorlagen Übersicht
    • Konfiguration
      • Grundeinstellungen
      • Marketing Banner
      • Header Hintergrundbilder im Listing
      • Schriftarten editieren
      • Einkaufswelt überlagernden Header erstellen
      • Transparenten Header auf der Startseite erstellen
      • Ausklappbare Topbar
      • Schlagwort Wolke im Footer
  • Horizon
    • Vorlagen Übersicht
    • Konfiguration
      • Grundeinstellungen
      • Schriftarten editieren
Powered by GitBook
On this page
  • Problembeschreibung
  • Erläuterung
  • Lösungsvorschlag

Was this helpful?

  1. FAQ

SVG Logo wird nicht angezeigt

PreviousEigenes CSSNextVorlagen Übersicht

Last updated 4 years ago

Was this helpful?

Problembeschreibung

Das eingebundene Logo als SVG-Grafik wird nicht angezeigt.

Erläuterung

Eine SVG Grafik wird auf eine Art Leinwand (engl. canvas) angelegt. Dies ist ein eigentlich unendlich große Fläche, die aber in einem Viewport mit festen Maßen angezeigt wird. Teile des canvas außerhalb des Viewports werden abgeschnitten und sind nicht sichtbar.

Beim Einbinden des Logos ist es nötig eine vorhandene SVG so zu skalieren, dass diese in ein bestimmtes Elternelement passt - dem Headerbereich. Mit dem viewBox-Attribut kannst Du ein Rechteck mit fester Pixelbreite bestimmen, das dann innerhalb des verfügbaren Viewports des Header skaliert werden kann.

Voraussetzung für eine korrekte Darstellung von SVGs ist also, dass diese für das Web korrekt angelegt werden: Soll eine SVG Datei wie eine JPG oder PNG Grafik behandelt werden, benötigt diese eine viewbox, eine width sowie eine height Angabe. Weitere Inforamtionen dazu findest Du hier: In der SVG Datei fehlen daher möglicherweise Angaben zu Breite und Höhe der Grafik. Falls du die Datei aus Illustrator gespeichert hast, werden diese nicht standardmäßig mitgegeben.

Lösungsvorschlag

Öffne die SVG-Grafik in einem Editor und setze die Werte für viewbox, width und height nachträglich. Hilfe:

https://css-tricks.com/scale-svg/#article-header-id-1
https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten