この機能は、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でのインデックス作成に影響がないかを確認するのが、これを試す最良の方法です。
「いいね！」 25
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- のようなプレフィックスを使用することは、これを回避するための優れた方法です。
「いいね！」 4
