# SVG Logo wird nicht angezeigt

## **Problembeschreibung** <a href="#problembeschreibung" id="problembeschreibung"></a>

Das eingebundene Logo als SVG-Grafik wird nicht angezeigt.

## **Erläuterung** <a href="#erlaeuterung" id="erlaeuterung"></a>

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** <a href="#loesungsvorschlag" id="loesungsvorschlag"></a>

Ö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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs-sw5.zenit.design/faq/svg-logo-wird-nicht-angezeigt.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.