Branding the Discourse splash screen with custom SVG images

Announcements
13

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.

4 Likes