FAQ
SVG Logo wird nicht angezeigt
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: https://css-tricks.com/scale-svg/#article-header-id-1 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://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten
Last modified 9mo ago
Copy link