Branding the Discourse splash screen with custom SVG images

[awesomerobot (Kris)]

This feature has been highly requested here on Meta Personal branding for the splash screen .

We have now added the option to add an SVG, either static or animated, as the splash screen image to replace this default loading dot indicator:

If a static SVG is used, then it appears above the loading dot animation:

otherwise if an animated SVG is used it replaces the dots entirely:

Note that for performance reasons, animated SVGs should use CSS transform or opacity animations only. ^[1]

You can enable this functionality via our Upcoming Changes system ( /admin/config/upcoming-changes):

The splash screen image site setting is used for this. You can use var(--primary), var(--secondary), and var(--tertiary) CSS variables within your SVG to reference your theme’s colors and adapt to dark mode.

It is important to note that enabling this functionality may have impacts on your LCP score , so making the change, waiting a while, and checking if it has any impact on LCP or indexing in the Google Search console is the best way to try this out.

---

1. We originally attempted to allow SMIL animation elements (<animate>, <animateTransform>, etc) but these animations will be paused by the browser when javascript is executing, causing stutter. Transform and opacity CSS animations are not blocked by JS, and avoid this issue. ↩︎

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

How I replace this dots? for me only appear to put my svg logo

[Don]

Hello

@awesomerobot

If a static SVG is used, then it appears above the loading dot animation, otherwise if an animated one is used it replaces them:

So it will be replaced if you use an animated SVG.

[ばこん (ばこん(bac0n))]

I’ve applied an SVG animation, but it appears very small.

Is there a way to enlarge it?

[awesomerobot (Kris)]

We don’t currently have a way to add custom CSS because this screen loads before much of the app and there are a lot more constraints. Can you share the SVG image you’re using here (or PM me with it)? I could do some testing and see if our defaults could be more accommodating.

[ばこん (ばこん(bac0n))]

Here it is

[awesomerobot (Kris)]

Thanks for the reference!

I’m adding a change that will allow slightly larger dimensions, and will better center screens with static logos: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

I also noticed your SVG has a lot of space at the top which is impacting centering, not sure if that’s intentional, but this version removes it

[ばこん (ばこん(bac0n))]

Thank you very much!

[awesomerobot (Kris)]

Note that there’s a slight change in what we’re allowing for SVG animation (and I’ve updated OP to reflect this). Originally we were allowing SMIL animations in SVGs, but it turns out these stutter because the browser pauses this type of animation while javascript executes.

So instead the recommendation is to only use CSS transform and opacity animations in your SVGs, as these aren’t blocked by JS.

If you take a look at @ばこん’s SVG above… it provides a good example of an allowable animation:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Also be careful to give your animations unique names so they don’t clash with other animations in Discourse (names like “blink”, “rotate”, “fade” etc could be too generic). Using a prefix like unique- is a great way to avoid this.