Svelte

A derived data URI in a Svelte 5 component. It renders the same on the server, so it works in SvelteKit as it is.

An avatar component

<script lang="ts">
  import { botlingDataUri } from 'seedkin/botling';

  let { id, size = 40 }: { id: string; size?: number } = $props();
  const src = $derived(botlingDataUri(id, { size, title: null }));
</script>

<img {src} alt="" width={size} height={size} />

Use it as <Avatar id={user.id} />. title: null leaves the accessible name to the <img>: keep alt="" when the person's name is next to it, and describe it otherwise.

On Svelte 4, take the props with export let id: string; and export let size = 40;, and derive with $: src = botlingDataUri(id, { size, title: null });.

Inline SVG

{@html botling(id, { size: 40, title: null })}

{@html} is safe here: the seed never appears in the markup, and a title you pass is escaped. For animated avatars under a strict Content Security Policy, use the <img> (see Animation).