These themes are loosely related, as the Logo should be in SVG format.

In principle, it is straightforward:

• Convert your logo to SVG. You will try to minimize file size, e.g. by creating an optimized SVG from Inkscape.
• Copy your logo to a subdirectory of fileadmin/yourPageName.
• In the Typo3 backend, go to template, point to your main page, edit constants.
• Edit the file paths at page.logo.
• Flush cache.
• View and enjoy.

For me, it was troublesome. First: I made the logo with inkscape and had inkscape coordinates set to mm. This made Chrome show the logo way too small. I corrected that by cleaning the document in Inkscape, but the problem remained. With Firefox the page looked fine, fiddling with parameters did not help. The final solution was to clear the browser cache in Chrome, as reloading the page with F5 did refresh all the elements except the logo. Too bad.

Pixal-based imagemaps are not responsive, so they are not useful anymore. With Inkscape, enhancing a diagram by clickable hotsopts (or at least mouse-over titles) is a breeze.

Typo3 does process SVG images before delivering them. The mentioned interactive features are gone then. As a remedy, I delivered the SVG as a pure HTML content element instead of using it like other images. Works fine. By the way. Inkscape adds hard dimensions to SVGs. You have to delete these, but keep the viewbox properties.

With Firefox, when CSP are enabled, SVG images often are displayed as black or otherwise bad. The reason is: Firefox interprets CSP in other ways than other browsers do. There is some debate if this is a bug or a feature. Mozilla knows about the issue for years and is not willing to change anything. You can fiddle with default-src, style-src, &c., but at least for me this did not help, and I really did not want to weaken CSP to uselessness.

More by accident than otherwise, I found out that saving as 'optimized SVG' from Inkscape can help. Especially the setting to change CSS attributes to XML attributes did the trick.