Using an SVG image as the forum logo

ShadowArmadyl

I wonder if it's possible.
Doing this would be great as it'd look a lot better with mobile.

datitisev

ShadowArmadyl Doesn't seem like it works, as it errors me when I upload a SVG or any other file that isn't an image (an SVG is basically HTML that draws the image without canvas ?)

HOWEVER, you can use @ChinW's Colorful Logo extension, which hasn't been updated but works fine.
EXCEPT for the fact that if the image is hosted in another website, it will break the forum when you access a tag or discussion because it will try to manage the content of the SVG which is located on another website. You'd just need the SVG file hosted in the same domain.

ShadowArmadyl

datitisev Except is there a way to remove the colorful part? I'd prefer my branding to stay consistent throughout all of the forum.

Also, must the image be hosted with the same subdomain?
Say my forum is on "f.domain.com", would hosting the image under "domain.com" be okay?

datitisev

ShadowArmadyl I've just done some more research, and it seems that there is an extension by @santiagobiali called Logo, which works with SVG images.
You will just have to make sure you set the height in the CSS settings, though, otherwise it will display its default size, small or giant ?
Even though the extension hasn't been updated since April 7, for v0.1.0-beta.5, it still seems to work in the latest dev-master, so I'm guessing it will still work in beta.6 as well.
Someone ought to remove the "Abandoned" extension, as it is still useful beyond Flarum's errors ?

from the extension's discussion

ShadowArmadyl

I think I may have made some progress here.

I went into Inspect Element on the forum homepage (just to see what would happen) and replaced the .png link to the logo with my .svg file and it displayed exactly the same but as an SVG.

Is there a way to manually upload my SVG file instead of doing it through the Flarum interface and have it use the file instead?

datitisev

ShadowArmadyl Um, hold on, let me check...

EDIT
It's not possible, as the logo is an image element, and the only way to change an attribute is with JavaScript....

Example:

<h1 class="Header-title">
    <a href="https://devflarum.xyzz.work">
        <img src="https://devflarum.xyzz.work/assets/logo-zzfs0byr.png" alt="DevFlarum" class="Header-logo">
    </a>
</h1>

ShadowArmadyl

Can you modify Flarum to change the location of the image then?

datitisev

ShadowArmadyl What do you mean?

0E800

You can ssh to your server and search/grep for your string / image.png. Also don't forget there is a separate logo extension that allows you to customize the css to it, which is not available option from core.