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