> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/faq/known-issues/svg-logo-is-not-displayed.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://themedocs.zenit.design/en/faq/known-issues/svg-logo-is-not-displayed.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.