perf(donate): use svg fallback for card images

src/routes/donate/+page.svelte

@@ -67,7 +67,7 @@
 					<a class="donate-card" target="_blank" rel="noreferrer" href={platform.url}>
 						<!-- not using <img/> because we want the image height to always be 200px -->
 						<div
-							style="background-image: url('/donate/card-images/{platform.name}.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.png');"
+							style="background-image: url('/donate/card-images/{platform.name}.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.svg');"
 							role="img"
 							aria-label="{platform.name} preview image"
 							>
@@ -79,7 +79,7 @@
 			{#if data.wallets}
 				<button class="donate-card" on:click={() => (cryptoDialogue = !cryptoDialogue)}>
 					<div
-						style="background-image: url('/donate/card-images/Cryptocurrencies.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.png');"
+						style="background-image: url('/donate/card-images/Cryptocurrencies.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.svg');"
 						role="img"
 						aria-label="Cryptocurrencies preview image"
 					/>

static/donate/card-images/fallback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2400 1260"><path fill="#E0F2FF" d="M0 0h2400v1260H0z"/><path fill="#182244" d="M1176 812v-45h52v45h-52Zm0-301v-45h52v45h-52Zm26 269c-19 0-37-3-52-11a98 98 0 0 1-56-77l51-8a59 59 0 0 0 60 48c15 0 26-3 36-10 9-6 14-15 14-24 0-7-2-13-7-17-4-4-10-8-19-11l-67-20c-38-12-58-36-58-71a75 75 0 0 1 45-71c15-7 32-10 51-10a106 106 0 0 1 83 37c10 11 16 25 21 42l-53 10a51 51 0 0 0-28-36c-7-3-15-5-23-5-9-1-16 1-23 3-7 3-12 7-16 11-4 5-6 10-6 16 0 7 3 12 8 17 6 5 15 9 27 12l48 14c24 7 41 16 52 28 10 12 16 27 16 47 0 17-5 32-13 45-9 13-21 23-37 30-15 8-33 11-54 11Z"/></svg>