# 使用自定义 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:** 15\ **Page:** 2
**Author:** ![philh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/philh/32/532740_2.png) [@philh](https://meta.discourse.org/u/philh)\ **Post date:** [2026年二月20日 22:01 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/24 "2026-02-20T22:01:28Z")
非常像爬行动物！ 添加一个逆时针旋转约 60 度，绕 y 轴旋转 180 度的，你就得到了一个复活的眼睛 添加一个绕 y 轴旋转的镜像，这样就有两个图像（眼睛） 去 Discourse a rex 没错，脑子里挥之不去，肯定需要多出去走走 ---
**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\ **Post date:** [2026年二月20日 22:20 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/25 "2026-02-20T22:20:26Z")
我在这里设置了一个独轮车加载器！[https://unicyclist.com](https://unicyclist.com) 真棒！ ![loader2](https://global.discourse-cdn.com/meta/original/4X/0/5/5/0550ba7a71d236248d70796d6b70607a631a174e.svg) 原始动画是我用纯 CSS 制作的，我让 Gemini 将其（可以这么说）转换为 SVG。 ---
**Author:** ![ばこん](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/%E3%81%B0%E3%81%93%E3%82%93/32/528615_2.png) [@ばこん](https://meta.discourse.org/u/%E3%81%B0%E3%81%93%E3%82%93)\ **Post date:** [2026年二月21日 14:03 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/26 "2026-02-21T14:03:51Z")
在 [https://unicyclist.com](https://unicyclist.com) 的加载屏幕上，加载条似乎超出了背景范围。 ---
**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\ **Post date:** [2026年二月21日 14:16 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/28 "2026-02-21T14:16:06Z")
谢谢。一位用户报告了这个问题。有一些 SVG 的怪癖（？）使得图片在帖子中显示……很奇怪，但在加载屏幕上却不会。 例如，这个旧版本： ![dffe8706e1d9ff4209f9d84db2cf7fa6baac5057](https://global.discourse-cdn.com/meta/original/4X/d/f/f/dffe8706e1d9ff4209f9d84db2cf7fa6baac5057.svg) 在这里看起来完全是坏的，即使我们点击它（它显示一个双重加载条……）。 但用作启动画面时看起来是好的。 我盲目地让 Gemini “修复它”，它创建了我发布的 SVG 看起来还可以，但显然某些用户在进度条方面有问题。我猜这就是您看到的情况： ![image](https://global.discourse-cdn.com/meta/original/4X/8/0/b/80bbc205c10651cc6998a792640a64481f2b1b9c.png) 我在 Windows Chrome/Firefox 或 Android/Chrome 上没有遇到任何问题。 我不知道 Discourse 与这些故障之间是否存在任何关联。 所以，为了保持主题，除了非 CSS 动画之外，当我们想为启动画面使用动画 SVG 时，还有哪些需要注意的事项？ ---
**Author:** ![ばこん](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/%E3%81%B0%E3%81%93%E3%82%93/32/528615_2.png) [@ばこん](https://meta.discourse.org/u/%E3%81%B0%E3%81%93%E3%82%93)\ **Post date:** [2026年二月21日 14:37 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/29 "2026-02-21T14:37:13Z")
我使用 SVG 中的 `clipPath` 来防止元素溢出。 也许可以这样指导 Gemini： ```plaintext 此 SVG 中的加载条超出了背景范围。请修改它，以确保它保持在背景范围内，使用 clipPath。 ``` ---
**Author:** ![asa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asa/32/184869_2.png) [@asa](https://meta.discourse.org/u/asa)\ **Post date:** [2026年二月21日 16:38 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/30 "2026-02-21T16:38:36Z")
感谢这个功能，我也试了一下，虽然还不完全满意，但我正在修复中 😃 ![splash-loader](https://global.discourse-cdn.com/meta/original/4X/6/0/e/60eb6937015ab54246296601a2229d2ed624d5e5.svg) ---
**Author:** ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)\ **Post date:** [2026年三月16日 21:44 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/31 "2026-03-16T21:44:16Z")
![download (2)](https://global.discourse-cdn.com/meta/original/4X/b/4/a/b4a52bebc4170d59ea55626ae325a687c4e360ad.svg) ![image](https://global.discourse-cdn.com/meta/original/4X/6/9/e/69e039d1d022ec795484bcfb2d53a644f347d8c2.png) 大小无法自定义 ---
**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\ **Post date:** [2026年五月19日 19:00 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/32 "2026-05-19T19:00:34Z")
新的 Gemini 3.5 Flash 在这方面甚至更出色 ![loading3](https://global.discourse-cdn.com/meta/original/4X/e/7/7/e777d46f6c52266844e517d687d192cb2ccf4135.svg) ![cup_of_ideas](https://global.discourse-cdn.com/meta/original/4X/6/5/a/65a4b50c686f732a7b5a8e62e6370186ac8b5ff2.svg) ![loading_3](https://global.discourse-cdn.com/meta/original/4X/7/d/7/7d79e48321f6a8332a338bf667f98e5868bb50cf.svg) ![i18n](https://global.discourse-cdn.com/meta/original/4X/0/1/b/01b5c7947812b3015ac09f73ea92a8cc7f7d3b40.svg) ---
**Author:** ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2)\ **Post date:** [2026年六月1日 10:15 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/33 "2026-06-01T10:15:20Z")
我已单独开启了一个相关的草案实现，但更广泛的构想仅仅是该功能的一个可能后续方案： 目前针对大多数站点而言，采用单个 SVG 配合 `var(--primary)`、`var(--secondary)` 和 `var(--tertiary)` 的方式仍然是最简洁、最清晰的方案，尤其是当同一 SVG 仅需调整颜色时。 我所探讨的使用场景是一种边缘情况：即深色模式下的启动画面需要完全不同的资源或视觉处理，而不仅仅是重新着色同一 SVG。例如，已登录状态的深色页眉可能最适合采用一种透明的标志/背景处理方式，而匿名登录或启动画面视图则可能需要稍有不同的炭灰色背景或调整后的 SVG，以获得更好的对比度。 因此，这一构想并非要取代当前基于变量的方案，而是为那些深色启动画面确实需要与浅色/默认启动画面有所不同的站点提供一个“逃生通道”。 欢迎反馈：这是否应作为一个独立的 `splash_screen_image_dark` 设置，还是应继续将现有的“单个 SVG + 颜色变量”方案作为唯一支持的途径。 ---
**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\ **Post date:** [2026年八月10日 14:01 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/34 "2026-08-10T14:01:23Z")
我最初尝试在启动画面中使用动画 SVG。虽然在桌面端运行良好，但我发现，在移动设备上，直接对复杂路径或 SVG 内部元素进行动画处理，会导致卡顿，甚至动画停止。 为了确保流畅的体验，我将动画逻辑转移到了包裹 SVG 的标准 HTML 容器（div）上。通过将 CSS 动画（transform、scale、opacity）应用于 div 包装器而非 SVG，移动浏览器可以更高效地利用硬件加速，从而避免卡顿。 ---
**Author:** ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)\ **Post date:** [2026年八月24日 17:42 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/35 "2026-08-24T17:42:55Z")
我在想，这个功能是否有可能扩展到支持动画 WebP 格式，还是说它严格依赖于 CSS 变换？ 我的意思是，GIF 文件体积很大，而 WebP 如今已经成为一种通用的无损标准。我能够将 5 秒的 200x200px、15 FPS 的动画压缩到 50/100 kb。如果将其缩短为 2/3 秒的循环播放，体积还能进一步减小。 ---
**Author:** ![nickdb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nickdb/32/444510_2.png) [@nickdb](https://meta.discourse.org/u/nickdb)\ **Post date:** [2026年八月24日 19:03 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/36 "2026-08-24T19:03:38Z")
是否支持深色/浅色模式？ ---
**Author:** ![nickdb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nickdb/32/444510_2.png) [@nickdb](https://meta.discourse.org/u/nickdb)\ **Post date:** [2026年八月25日 08:47 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/37 "2026-08-25T08:47:24Z")
每次我修改 SVG 文件，UI 在上传时都会报错，但文件实际上已经存在并且可以正常使用。 ---
**Author:** ![nickdb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nickdb/32/444510_2.png) [@nickdb](https://meta.discourse.org/u/nickdb)\ **Post date:** [2026年八月26日 14:24 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/38 "2026-08-26T14:24:58Z")
回复我自己，刚才我脑子短路了。只需在 SVG 中引用 Discourse 配色方案的 CSS 变量即可，这样就能根据需要自动适配亮色/暗色模式的动画效果。 ---
**Author:** ![nickdb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nickdb/32/444510_2.png) [@nickdb](https://meta.discourse.org/u/nickdb)\ **Post date:** [2026年八月26日 14:34 UTC](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100/39 "2026-08-26T14:34:38Z")
我注意到提到了尺寸。是否有计划支持稍大一些的开屏动画版本？ 我会裁剪动画周围的空白区域，希望这样能营造出更大的图像效果。 [上一頁](https://meta.discourse.org/t/branding-the-discourse-splash-screen-with-custom-svg-images/395100.md?page=1)