SVG logo is not displayed

Problem description

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

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