Change navbar_brand logo

Help
1

I’m trying to replace the LibreNMS logo in the upper left of the nav bar with a custom logo. I have no problem replacing it with a PNG by placing the image in the ~/html/images/custom/ directory and setting the value in Global Settings > Web UI > Styles > Title Image

However, SVGs are recommended in the documentation, for reasons, and I have been unable to get any SVG to work. Is this a known thing, that SVG files can’t be used as a custom Title Image?

I download several of the many librenms*.svg files and modify in Inkscape, processed and save as instructed in Initial Detection - LibreNMS Docs and then saved in the Custom images directory, setting user librenms:librenms as owner, and set the filename in Global Settings. I’ve also tried replacing the librenms*.svg files in situ to no effect.

I feel like there must be something obvious I’m missing here since I can so easily get PNGs to work but I can’t get SVGs to work, which are officially stated to be the preferred file format.

2

I don’t / haven’t used it before but as it uses <svg><use href=""> then you need to pass the id of the svg in the url.

So if you upload a file called logo.svg in to html/images and it has this in it <image id=“image0_354_117” width=“150” height=“150” then you would do images/logo.svg#image0_354_117

3

What is “it” in this context?

4

ID like my example.

5

I don’t understand. It appears that you’re saying that the file listing in Global Settings should have a suffix that matches an element ID in the html code of the page. But from what I can see there is no image element tag in any html or php code anywhere that would have an id specified in it like that.

The menu bar code at ~/resources/views/laouts/menu.blade.php specifies

<x-logo responsive="lg" class="tw:h-full tw:max-w-[170px]" />

in turn leads us to the code in ~/app/View/Components/Logo.php

{
        $this->image = $image ?? (string) LibrenmsConfig::get('title_image');
        $this->text ??= LibrenmsConfig::get('project_name');
        $this->is_svg = str_ends_with($this->image, '.svg') && ! str_contains($this->image, '//');

        [$this->logo_hide_class, $this->logo_show_class] = match ($this->responsive) {
            'sm' => ['tw:sm:hidden', 'tw:sm:inline-block'],
            'md' => ['tw:md:hidden', 'tw:md:inline-block'],
            'lg' => ['tw:lg:hidden', 'tw:lg:inline-block'],
            'xl' => ['tw:xl:hidden', 'tw:xl:inline-block'],
            '2xl' => ['tw:2xl:hidden', 'tw:2xl:inline-block'],
            default => ['', ''],
        };

which allows for a range of possible images depending on system configuration and file type. There is no statically named id that I could make my Title Image string match.

Further, that code seems to imply in the last case that it should properly accept my SVG file as an SVG provided it is local and not a remote link. If I’m reading that correctly.

When I look at the code of a live page all I see in the default logo’s place is an SVG container and path being detailed, not a reference to a file. So it seems like an SVG file is dynamically loaded into the document as it is written out rather than having a source file url detailed, which would seem to comport with the stated reason for preferring SVG, so it can by dynamically resized and colored to fit the page display device and settings.

6

No, the id from within your svg file itself.

One I just tested has this in the file <image id=“image0_354_117” width=“150” height=“150” so I used logo.svg#image0_354_117

7

Ah. Yes, that did the trick.

Interesting, however, that none of my SVG files have an image tag in them as yours does. Neither those saved as Inkscape nor Plain svg format.

A curious thing to me is the implications resulting from this working. The fact that I have to specify the ID of the svg element in the file suggests that the system expects that there could be multiple such elements in the file. However, from what I know about the SVG format there can only be one root level svg element.

Guess I need to do some more reading.

Thank you for sticking with me in my obtuseness and getting me to the answer.

8

It doesn’t have to be <image.

But yes, an svg can in essence embed multiple images in one and you can then select which one you want from within it.

9

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.