# SVG logo is not displayed

## Problem description <a href="#problembeschreibung" id="problembeschreibung"></a>

The embedded logo as SVG graphic is not displayed.

### Explanation

An SVG graphic is created on a kind of canvas. This is actually an infinitely large area, but it is displayed in a viewport with fixed dimensions. Parts of the canvas outside the viewport are cut off and are not visible.

When embedding the logo, it is necessary to scale an existing SVG so that it fits within a specific parent element - the header area. With the viewBox attribute you can specify a rectangle with a fixed pixel width, which can then be scaled within the available viewport of the header.

So a prerequisite for a correct display of SVGs is that they are created correctly for the web: If an SVG file is to be treated like a JPG or PNG graphic, it needs a **viewbox**, a **width** as well as a **height** specification. More Inforamtionen you can find here: <https://css-tricks.com/scale-svg/#article-header-id-1> Therefore, the SVG file may be missing information about the width and height of the graphic. If you saved the file from Illustrator, these will not be included by default.

## **Solution** <a href="#loesungsvorschlag" id="loesungsvorschlag"></a>

Open the SVG graphic in an editor and set the values for viewbox, width and height afterwards. Help:\
<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.zenit.design/en/faq/known-issues/svg-logo-is-not-displayed.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.