この機能は、Meta Personal branding for the splash screen で非常に要望が多かったです。
このデフォルトのローディングドットインジケーターを置き換えるために、SVG（静的またはアニメーション）をスプラッシュスクリーン画像として追加するオプションを追加しました。
静的SVGを使用する場合、ローディングドットのアニメーションの上に表示されます。
アニメーションSVGを使用する場合は、ドットが完全に置き換えられます。
このために splash screen image サイト設定が使用されます。SVG内でCSS変数 var(--primary)、var(--secondary)、および var(--tertiary) を使用して、テーマの色を参照し、ダークモードに適応させることができます。
注意することが重要ですが、この機能を有効にすると、LCPスコアに影響を与える可能性があるため、変更を加え、しばらく待ってから、LCPやGoogle Search Consoleでのインデックス作成に影響がないかを確認するのが、これを試す最良の方法です。
「いいね！」 27
philh
3
「いいね！」 1
eisammy
(Sammy)
4
このドットをどうやって置き換えるのですか？私のSVGロゴを挿入する場所としてのみ表示されます
「いいね！」 1
Don
5
こんにちは 
したがって、アニメーション SVG を使用すると置き換えられます。
「いいね！」 2
ばこん
(べーこん(bac0n))
6
SVGアニメーションを適用しましたが、非常に小さく表示されます。
拡大する方法はありますか？
「いいね！」 2
現在、この画面はアプリの大部分が読み込まれる前にロードされ、制約が多いため、カスタムCSSを追加する方法がありません。お使いのSVG画像をこちらで共有していただけますか（または、非公開メッセージで送信していただけますか）？いくつかテストを行い、デフォルト設定でより対応可能になるか確認できます。
「いいね！」 3
参照ありがとうございます！
少し大きな寸法を許可し、静的ロゴを持つ画面をより中央に配置できるようにする変更を加えています: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub
また、SVGの上部に多くのスペースがあり、中央揃えに影響を与えていることに気づきました。意図的なものかどうかわかりませんが、このバージョンではそれを削除しました。
「いいね！」 1
SVG アニメーションで許可される内容にわずかな変更があったことに注意してください（OPもこれを反映するように更新しました）。当初、SVG 内の SMIL アニメーションを許可していましたが、ブラウザが JavaScript 実行中にこの種のアニメーションを一時停止するため、これらは途切れることが判明しました。
そのため、代わりに、JS によってブロックされない CSS transform および opacity アニメーションのみを SVG で使用することが推奨されます。
上記の @ばこん さんの SVG を見てみると、許可されるアニメーションの良い例が示されています。
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
また、アニメーションが Discourse 内の他のアニメーションと競合しないように、一意の名前を付けるように注意してください（「blink」、「rotate」、「fade」などの名前は一般的すぎる可能性があります）。unique- のようなプレフィックスを使用することは、これを回避するための優れた方法です。
「いいね！」 6
Falco
(Falco)
14
Google は Gemini Pro 3.1 をリリースし、モデルの最初のハイライトとしてアニメーション SVG を紹介しました。当然ながら、https://discourse-on-a-pi5.falco.dev/ のためのローダーを作成してみたところ、わずか 2 つのプロンプトでこれが得られました。
この新機能と非常によく合います！
「いいね！」 14
Bas
(Bas van Leeuwen)
15
それは素晴らしいですね、Falco 
GeminiがDiscourseのロゴで何ができるか見てみたいです 
「いいね！」 2
Falco
(Falco)
16
ええ、その結果にはかなり満足しています！私は長い間モデルでこれを試してきましたが、これをうまく処理できるのはこれが初めてのモデルです。
プロンプトは次のとおりです。
Raspberry PiミニボードPCに関するフォーラムで使用されるローディングアニメーションとして使用されるアニメーションSVGを生成してください。アニメーションはSVGインラインCSSを使用して行う必要があります。
そして、生成されたのは
その後、私は次のように続けました。
これは素晴らしいです！Raspberry Pi自体、赤い六角形、アニメーションを変更できますか？それらは左上から右下に斜めに動いていますが、中心からずれていて奇妙に見えます。静的で中央に配置し、より繊細なアニメーションにしませんか？
そして、共有したバージョンが生成されました。
唯一の争点は、SVGコードに次のようなCSSコメントが多数含まれていることです。
/* Base Animation & Board Styles */
これはSVGファイルとして保存すると無効になるため、それらの7行を手動で削除しました。
「いいね！」 3
Bas
(Bas van Leeuwen)
17
あなたのほうがずっと良い結果を得ていますね。
数回のイテレーションで諦めた結果、これが私の一番良い結果です 
[編集]、途中の状態をあと2つ追加させてください：
これはかなり良かったのですが…ロゴが壊れていました：
これが一番興味深いと思いましたが、ロゴのアニメーションとしては全く機能しませんでした（そして、何の理由もなくSVGではなく音声付きの動画としてレンダリングされました）：
皆さん、話題を脱線させてしまい申し訳ありません 
Falcoの作品を称賛し、スプラッシュスクリーンについて話し合うことに戻りましょう！
「いいね！」 6
Falco
(Falco)
18
残念ながら、Discourseのロゴの制約がきつすぎるのかもしれません。
私は以下を試しました。
Discourseで動作するディスカッションフォーラムのローディングアニメーションとして使用されるアニメーションSVGを生成してください。フォーラムはDiscourse上で動作するため、虹色の吹き出しなど、そのモチーフをSVGに使用できますか？アニメーションはSVGインラインCSSを使用して行う必要があります。
そして、以下を得ました。
「いいね！」 6
Falco
(Falco)
19
アニメーションのDiscourseスプラッシュコンテストを開催すべきです！
「いいね！」 6
Canapin
(Coin-coin le Canapin)
20
Geminiを「プロ」モードに設定することを考えましたか？デフォルトではそうではないかもしれません。
「いいね！」 2
keegan
(Keegan George)
22
新しいブランディングスタイルに合わせて、一つ作ってみました
「いいね！」 6
noahl
(Noah Lovell)
23
さて、私もこのトレンドに参加することになったようです 
プロンプト
これをアニメーションSVGに変換してください。
ルール:
- アニメーションSVGである必要があります
- ページ間のローディングアイコンとして機能するため、控えめで最小限である必要があります。
アイデア:
- 全体の形状は歪ませずに維持したい
- 3つの内側の図形で何かできると思います - テーブルテニスのラケットを柄で手に持って回転させたときのような、何らかの回転です。
ブランドのアイデンティティを維持し、全体的なデザインを壊さないことが必須です - これはブランドにとって不可欠です。
出力（3回の修正後）:
「いいね！」 7
