Hello,

I'm not sure if this PR is relevant but I've encountered a problem when I try to draw the generated SVG into a canvas (with some javascript like this) :

 window.addEventListener("load", function () {
            var myCanvas = document.querySelector('#myOutputCanvas')
            var ctx = myCanvas.getContext('2d')
            var img1 = new Image()
            img1.onload = function () {
                ctx.drawImage(img1, 0, 0)
            }
            var avatarId = 'Binx Bond';
// this doesn't work :
            var svgCode = multiavatar(avatarId);
// this works :
            svgCode = '<svg xmlns="http://www.w3.org/2000/svg" width="231" height="231" viewBox="0 0 231 231"><path .....'
            
            img1.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgCode)
        })

When I copy-paste the content of the generated SVG and add the height and the width attributes into the svg root tag, it's ok.

I'm not an expert in SVG so if this PR would break other usages for your library, feel free to dismiss it.

Anyway, thank you for your time.

More and more people are using ES modules because of their static nature. It would be great if Multiavatar supported that. Support for UMD would also be great so then users of AMD and people who just read off the global object could also use it. There a couple different ways this could be implemented, the most organized being a rollup build setup or something, the least being copy and pasting the same code into different files for different formats.

Hi there ! First of all this is really awesome :) thank you for making this awesome ability! I've managed to run locally and get images generated :D Now starting to study up on svgs and how to make them, would like to draw my own art style and have it generate a new set of results

Was wondering if you could suggest how you made your images, which program you used, and if there's any specific formatting needed to have it work with the app , like having exactly 6 sections, etc

Thanks a lot ! Have a good one !

I have just finished rewriting Multiavatar in PHP.

It is now being used for the https://api.multiavatar.com, which became much faster, because before it was a mix of PHP and Node.js, and now just PHP.

Further on, I'm planning to build avatar images "on the fly". On user request, the image will be generated and saved on the server. It will be possible to generate and access it directly just by adding .png or .svg at the end of the URL, e.g. https://multiavatar.com/Starcrasher.png

Additionally, this PHP script will be used in the Multiavatar WordPress plugin, which is planned for the near future.

For more details, please refer to the PHP repository here: https://github.com/multiavatar/multiavatar-php

Hello @giekaton !

Abstract

I am building a web with users and didn't want to use the "default_user.svg" since it is boring. Found this package and fell in love with it immediately.

Problem

So I went ahead integrated it with my React project and since I don't want to "unsafely render svg text" on my web, I tried inline SVG like the following:

// React Component
const Avatar = () => {
  const svgString = useMemo(() => {
    return multiavatar("hello world!", false)
  }, [])

  return (
    <img src={`data:image/svg+xml,${svgString}`} alt="avatar" />
  )
}

The above did not render because # is included in the svgString.

Solution

So I tried encoding the string as such:

// from "https://github.com/tigt/mini-svg-data-uri"
// "modified" a bit
const REGEX = {
    whitespace: /\s+/g,
    urlHexPairs: /%[\dA-F]{2}/g,
    quotes: /"/g,
}

function specialHexEncode(match: string) {
    switch (match) {
        case '%20': return ' ';
        case '%3D': return '=';
        case '%3A': return ':';
        case '%2F': return '/';
        default: return match.toLowerCase();
    }
}

export const toDataURI = (string: string) =>
    encodeURIComponent(string)
        .trim()
        .replace(REGEX.whitespace, ' ')
        .replace(REGEX.quotes, "'")
        .replace(REGEX.urlHexPairs, specialHexEncode)

The above code was used as return toDataURI(multiavatar("hello world!", false)) and what do you know, it renders!

Advantages

For developers using multiavatar on the client side can easily render the avatars with img tag.

Request

multiavatar function to include optional parameter asDataURI?: boolean (defaults to false)

Real Life Usage

// React Component
const Avatar = () => {
  const svgString = useMemo(() => {
    // May also support options object?
    // return multiavatar("hello world", {
    //   asDataURI: true,
    //   sansEnv: false,
    // })
    
    // expecting `data:image/svg+xml,{encodedSVGstring}`
    return multiavatar("hello world", false, , true);
  }, [])

  return (
    <img src={svgString} alt="avatar" />
  )
}

Edit:

• Mentioned @giekaton because I wanted to say hello ✋
• Added expectation returned from multiavatar @ Real Life Usage

Is there any way users on my website could choose from selected options without leaving the site. It would be great if options are only 16 or 48 instead of 12 billion. Need an api which I call to get full list, get avatar characters or generate random avatar.

Hi @giekaton your project is excellent, but in some websites and Apps, the avatar is a square shape, so It would be better if the Multiavatar can support generating square shape avatar.

It seems changing the avatar's shape and spread the background color to the edge can do it, but this change may cost a lot, even rebuild the project.

So an easier way is adding an option discard background , without the circle background, the avatar can fit not only circle shape but the square shape.

Thank you very much!

Congrats on the new repo! I love it!

It would be handy to be able to add a gender filter, or a filter that creates gender-neutral avatars (say, no mustache for female and gender-neutral avatars).