# 使用自定义 SVG 图像为 Discourse 启动画面添加品牌标识 **URL:** \ **Category:** Announcements\ **Tags:** splash\ **Created:** [2026年二月4日 01:46 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100 "2026-02-04T01:46:32Z")\ **Posts on this page:** 1\ **Showing post:** 1
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2026年二月4日 01:46 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/1 "2026-02-04T01:46:32Z")
此功能在 Meta [Personal branding for the splash screen](https://meta.discourse.org/t/personal-branding-for-the-splash-screen/304711) 上被高度请求。 我们现在添加了添加静态或动画 SVG 作为启动画面图像的选项，以替换默认的加载点指示器： ![image](https://global.discourse-cdn.com/meta/original/4X/7/e/b/7eb44d6bb88f5de79683ba83d5f4f6dbb9f2d524.png) 如果使用静态 SVG，它会出现在加载点动画的上方： ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/3/a6371bb45bfaa9a89a4604fa2b935105930642e8.png) 否则，如果使用动画 SVG，它会完全替换这些点： ![image](https://global.discourse-cdn.com/meta/original/4X/a/8/6/a864461bfb11aaa70bfb28413e049af9e778b879.png) 请注意，出于性能原因，动画 SVG 应仅使用 CSS transform 或 opacity 动画。[^\text{1}] 您可以通过我们的“即将进行的更改”系统（`/admin/config/upcoming-changes`）启用此功能： ![image](https://global.discourse-cdn.com/meta/original/4X/c/b/6/cb6d0bc849847f166cda527dd72aeecf539148bc.png) `splash screen image`（启动画面图像）站点设置用于此目的。您可以在 SVG 中使用 `var(--primary)`、`var(--secondary)` 和 `var(--tertiary)` CSS 变量来引用主题的颜色并适应深色模式。 ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/c/53c49f367093083f117c4047d317396aefda28cd.png) **需要注意的是** ，启用此功能可能会影响您的 [LCP 分数](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint)，因此最好的尝试方法是进行更改，等待一段时间，然后检查它是否对 LCP 或 Google Search Console 中的索引有任何影响。 --- _[View the full topic](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100)._