Simple javascript example showing how to export svg and render on screen?

[falconair]

Hi, I'm not a web developer and don't know anything about react (and not much about typescript). Could you please provide a simple example showing how to generate an svg and perhaps even render it? Something a non-react developer would understand?

For context, I'd love to use this to get my students to generate their own avatars, feed me the attributes, I'll render tiny little icons of their avatar and display them on an educational board game.

Also, this is awesome work. I would love to read about how you did this at a technical level. This is basically a domain specific language for cartoon characters.

[RobertBroersma]

Hi @falconair !

If you're not a web developer you can head over to https://bigheads.io/editor/ and select the parameters you want. When finished, you (or your students) can either download the avatar as an SVG or share the URL in the browser bar.

If you still want to use code somehow you'll also find an example there of how to include the avatar in an <img /> tag in HTML :)

Hope that helps!

[janodetzel]

Here some react 😉

  const bigheadSvg = ReactDOMServer.renderToStaticMarkup(
    <BigHead body={props?.body} skinTone={props?.skinTone} />,
  );

  const svgBuffer = Buffer.from(bigheadSvg);

  const bitmapBuffer = await sharp(svgBuffer)
    .png()
    .resize({ width, height })
    .toBuffer();

  return bitmapBuffer?.toString('base64');