I'm using the program DiceBear to generate an avatar using .svg files. The program pulls .svg files from a library and layers them on top of eachother using a createAvatar function.
How could it be written so the end result is rasterized into a single png?
import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-male-sprites';
import * as React from 'react';
import SVG from 'react-inlinesvg';
import Layout from '@/components/layout/Layout';
import Seo from '@/components/Seo';
export default function HomePage() {
const svg = createAvatar(style);
console.log(svg);
return (
<Layout>
<Seo />
<main>
<section className='bg-dark'>
<div className='flex flex-col items-center justify-center min-h-screen text-center text-white layout'>
<SVG src={svg} />
</div>
</section>
</main>
</Layout>
);
}