WebP vs SVG for interactive mobile game UI assets: What is your export workflow?

Hi community,

I am finalizing the UI components and marketing graphics for a new daily word puzzle I’ve been developing for the New Zealand region, hang five.

Because the application relies on instant load times and zero layout shifts on mobile, I need the graphical assets (specifically the custom letter tiles, branding characters, and UI icons) to be as lightweight as possible while retaining absolute crispness on high-DPI retina screens.

Currently, I am designing everything in Illustrator and bringing it into Photoshop to export. I’ve been experimenting with exporting my UI layers as WebP files rather than SVGs to see if it handles the vibrant color palettes and gradient shadows better without bloating the DOM size.

Does anyone have a preferred workflow or specific export settings in Photoshop/Illustrator when batch-exporting dozens of small, highly styled web UI assets? Would love to know if I should just stick to SVG for the interface elements.

Thanks in advance!