Generate SVG Or PNG Avatar Images From Usernames – profile-image.js

Preview:

Description:

A JavaScript library that generates SVG and PNG profile (avatar) images from any text. The resulting image is a simple portrait of the first letter in your name.

See Also:

• Text Avatar Generator With JavaScript And SVG – UI Avatar SVG
• Generate Github-style Identicon Avatars With Squares – Squareicon
• Material Style Text Avatar Generator – Material Avatar

How to use it:

1. Download and import the profile-image.js library.

<script src="src/profile-image.js"></script>

2. Create a new ProfileImage and define the username as follows:

var image = new ProfileImage("CSS Script");

3. Output the profile image as SVG.

image.svg();

// result
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' width='100' height='100' style='font-weight: normal;'>
  <rect width='100' height='100' x='0' y='0' fill='#1f6feb'></rect>
  <text x='50%' y='50%' alignment-baseline='central' text-anchor='middle' font-family='Arial' font-size='40' fill='#ffffff' dominant-baseline='middle'>CS</text>
</svg>

4. Output the profile image as base64 encoded PNG.

image.png();

// result
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IArs4c6QAAGRxJREFUeF7tnQmUFNXVx+/M9PQ2PTOgRMQlgogQJfoBIiiCfgouR0AFBAkB3FDcQhKJaDQqLhGiMdGgaEARiMAHMqBgFEREwY1F1igKqOCngBswW09Pbzm3hj4Mw9D1qvpVdz3fv87xHDxT/eq+3731r7fel3fCqO+ShAsEQEBLAnkQAC39jkqDgEEAAoBAAAGNCUAANHY+qg4CEADEAAhoTAACoLHzUXUQgAAgBkBAYwIQAI2dj6qDAAQAMQACGhOAAGjsfFQdBCAAiAEQ0JgABEBj56PqIAABQAyAgMYEIAAaOx9VBwEIAGIABDQmAAHQ2PmoOghAABADIKAxAQiAxs5H1UEAAoAYAAGNCUAANHY+qg4CEADEAAhoTAACoLHzUXUQgAAgBkBAYwIQAI2dj6qDAAQAMQACGhOAAGjsfFQdBCAAiAEQ0JgABEBj56PqIAABQAyAgMYEIAAaOx9VBwEIAGIABDQmAAHQ2PmoOghAABADIKAxAQiAxs5H1UEAAoAYAAGNCUAANHY+qg4CEADEAAhoTAACoLHzUXUQgAAgBkBAYwIQAI2dj6qDAAQAMQACGhOAAGjsfFQdBCAAiAEQ0JgABEBj56PqIAABQAyAgMYEIAAaOx9VBwEIAGIABDQmAAHQ2PmoOghAABADIKAxAQiAxs5H1UEAAoAYAAGNCUAANHY+qg4CEADEAAhoTAACoLHzUXUQgAAgBkBAYwIQAI2dj6qDAAQAMQACGhOAAGjsfFQdBCAAiAEQ0JgABEBj56PqIAABQAyAgMYEIAAaOx9VBwEIAGIABDQmAAHQ2PmoOghAABADIKAxAQiAxs5H1UEAAoAYAAGNCUAANHY+qg4CEADEAAhoTAACoLHzUXUQgAAgBkBAYwIQAI2dj6qDAAQAMQACGhOAAGjsfFQdBCAAiAEQ0JgABEBj56PqIAABQAyAgMYEIAAaOx9VBwEIAGIABDQmAAHQ2PmoOghAABADIKAxAQiAxs5H1UEAAoAYAAGNCUAAHHZ+iyb5dNFpPupwgodaNy+go0vzKeDNo8ICIq8n76CnJ5NENdEkxRJE31ck6Os9CVq/PUrvfhal97ZEHbbU2eKZQ492Xup6UiG1OfoAB19hHnnyD302c4gniMrDSdq9L0Fbd8do1ecxemdzLe3cm3DWWI1KhwA44OyLTvNSvzP81KmVh5oW5VNBIwFu5bEsDFWRJH26M0bzVkeM//j/3X6d9wsvXdbJR11aF1Lz0sw5cH1ZFPZUJWjNFzH69/oIvbwm4nYMrrYPAiDJPfxVu/68APVs76UjivIp7+CPu6Sn1BVTUZOkpf+ppQlvVNOWXXGpZWdaWJEvj27pFaTLOvromKbOcmBh/LEqQUs21dLkZWHXsciUZTZ+DwHIkDI3aUdeEKCzTiokbs5m8wrXJo3g//MrVTlvFqde/EFdfXRkKMMmjw2I3CJavLGW/rIw9yxsmJ+zn0AAbKLv0NJDv7kwSGe3yf6L39DkHyoTNHFJ2PgK5uLivv2fLi+ik5oXONryEakbs5j8VpgmvpkbFiI2uukeCIANb9x2YdBo7pcGs/vFT2cqDxxya2BsWWVWWwOjLw3SNT0CxC0At1zMYtGGCN0xs1KJsZJccoMAWKDP/fz7+oWM5n6mA3sWHit8K/eJN3wVo/vLKmntlzHh39m9cdxVIerf2W/MaLjtSrEYPaMCYwNpnAMBEIxcHtG+r18RtfqZC6O9QR2++C5OY8uqaNkntYK1s37bHy6tawVle9zDiqUQAXNaEABzRnTFGT66s0+RMZVl50pNXW3eGafPdsZo0//HaNfexCFz++ef4qUWTfONNQNtW3joxKMKbDetnRSBId38NKZ3EZUErDf7uXn+XXnCmNvf/n2cuM/OPBpe7Y/zGIOJJzQroOOOyLc9ncoi8O6WKN34XDm6A40ELwTA5I0e2MVPY/oELY9sc+B9sydBr66L0JyVNbaboYPP8tNVZ/np1OM8jS6YSWf+5m9idNs0uU1gHvx8cmgxHX+keEuIZyvWbY8ZLOyuYeCFRP06++nyTj5DGK10wWJxoheWh+mh+VV29Psn/RsIQBr3crP/kUEh4uATvfjF5xdv0rIwla2St0iFR9rv6B2kU4/1CI+0O/H1mzC8mC79H5+QDZFokt7YVEtPLJK7XsEOi73VSfrTS5W04CN5PhGNCTffBwE4jHd4wO8fw4qp3TEeYf9lYwrK6qg7v4Q8Pfjoq9XC9TjcjX06+ujBASFqIjD7wSz+9lo1/evdmoyfe7gCrLLgJdVDnt7nmD0qFgwBaMRrPKX17HUl1K1NodCXjr+0qz6P0iMLqrIy+m51TIL722NmVWY8KPjksGLq08H8689r9e+dW0lvbHRuEDLlNivjEbxYaNyCKpq+wjlRUk0EIACNeMzKCDcP8C3eGKHRM7I752xFBFig3vy4lq6fVG47PrnvP2FYCR17RPruEG/eGb+wil508MvfsBJW/LX041q69p/2OdgG6NIfQgAaOIb7/eOvCgmN+PPLP39NhG5/sSIn7rXy9eMX85FXqmjm+/a+fr+/JEg39QymnfNnoeGBvlunZp/H34cWU9+OPso3mZjgXZYs1k5OkeYkGGw+FALQANzkESV0wSle06a/EwNsdnz41yHFxsi4yKj4ys+jNPBJe33gSdeXUK/23rQm5vLlEp2d4BkBHqAdvwAzAuxMCEC9kOYpt7v6is1vOzHFZkcAeLDyqatL6OSjzafl9lUnjb65nS20r49pQu1apB8QXfNFlPo/YU9g7NS94W8evjJEg8/2m7YClm+O0tBncmenjLrKKgMCUI/kizeXUreTC03Z8ov08MtVNPtDe81p0wdYvOGmngEadVGQ/Ca7EbnVsmBthH4zzVoT/cwTC+mJYcWm06H/90GNMdiYq6vnqV4aPzhkumZj2+449X18LxYGoQVwIFQ5ccUD/UOmG3wSSaJ5qyJ0+wxrL5GTLwXPWkwdWUJntDIXr69/TNCt08otzVbwjsfHf11sZDM63BWNE01cUk2Pv5b5dGMmrBaObkK8ijDdxVOUY2ZW0pL/OD9LkUldsvFbtAD2Uxad4rLzAmXDkTfvbwWYrc3ndQG8MOfpJeLbZft1rpv/T7fjzy0C8JfBIbryTH/aMRyeDuRFQTIXamXDx048AwJARKJTXPz1n/leDd09J3fN3MMFAW9Sem5EibFMNt3F3YDXNkTo5iniLRhuHT10ZYiK/emH2HPdBeB6c1foll6BQ/It1mfiFrFy4oW2WiYEgIhEprgYrNubjo0NgtXfiPTeZ7VGgtH1O6xtFRbpAjCfXA8Csg2p1grPinDdedT/2/IExRNJI5XaVz/U/XvxptqsLFSy+kJm+34IABGJDv5lMo2WDcfyGv0HBhRRbYyMHXb8snNijEyz6HLrYsqNJdSyWfrWRS6nAbPB96f4DO0FQPTrxttYp7wdNkb/dbzmjiqlTiaDjDJWHOrINpd11l4AOKHnby82n0Jze/Pf6SASGVxjG2RuPnK6TigfC4FINLA374zRxeP3ahszA8700/39iihkMhDIgPhQj1nv19D9ZXq2llQKEu1bACJNW3bowrW5WePulmDiKcDZt5UaiUlELqfyIog8G/eIE9BaAEQHt3ja6Nml1fSYhD314q5x352iaw3qW57KjLRwXYReeCec8YCk+6iobZHWAsCj5g8PNE9wwdNH98yxt4Ze7fA42HpuBcy8tZROO16sFdCw7iykW3fFaNknUSpbbT9N2k+Jaa7rorUADO/O+f6KKOhNv8CFp9FGTasgngbU/eJzD/880Hy9vRmn1LFeH30pb7rS7Jn4+6EEtBYA0QVAfP5er3F7ED/7CVhJwCEKrf6CJT4RmY/5srpgSfRZuO8AAa0FgBN/DOrqN40H5JI7FNEDA0I0qIvPsXMBUicic3pz5v/a+ggEwTRSrd8AARAQAM5sO2Iy0kg1DC/uPl3Tw2+6Ddl6WB76CxYEzmq0dXfMyDTMOQ0yXeEowy7Vy9BaAKaPLKXu7cy30Lphk4tbA41bULyQykrqdBl14ZWZO76vax1MW4Gjwe0y1VoARPcAQADSh1fqzEQ+Kt0jfoSC3Zg95Hc8fvD5t3EqW1VD01bUINGHBbIQAIEMQBAAsYjiGQI+OfkXx3iEchSKlWrtrh+rEkbCFk5Mwvv+caUnAAGAAEh/R1gIhp4ToE4tPRQwmWKV/nAi4vEC3pn4/NthmvimeOITJ2xxe5kQAAiAYzHKC4c40WrfTj5qe3SBYzMGh6sAjxN8sDVKY8sqbZ/N6BgclxQMAYAAZCUUWQz4MJOLT/cZOftKA3mmqddlGfbl93FjG3c2TiqSZXO2ytFaADALkK0wO/Q5p//cQxf+0ktnt/ESDyKyQORZP21cuAK8nXv8gmrXZHIWNtzhG7UWANGFQHNXuisLsMMxkZPiU4LAMwmtmzvTQsjmmYU5gWjjoVoLAK9p5z6q2ZcHKwFtRFaGP3GqheCWA10yxCPt51oLgOheADcku5TmcUUL4jMbLzndS2e2LqSfH1lge5oRacsODgCtBWBgFz/d168obb57xoXNQO5SDR4z4Nz/vJ37mKb5pi24htZX1ybp0YXVNOUdTBFqLQCiR0nt2peg3/+rgt7bgu3A7pICoqHn+On68wJGq8CsK1ff9tVfRGn4M+XaLxbSWgBEMwLhJBm3vfYH28MzCLxF+couftPWXOqX7NNxC6po+gp3nO+YK8JaCwBDF8kJiJRguQpPa8/ldQZ39imi5mnOMEyVaPegVGsWuf9u7QVANCuw7klB3R/KdRb27uCjsf2LTE8I5ns/2xWnK/6m9ynB2guA6LkAqgQLH+X92JAQFRbk0YYdMVq8KUKvr6/Vqq97z+VFdHX3AHnSH2Tk+qPesiG62guA6MlAe6uTdPfsSnp1XSQbfrH9jMbyHPKa+N17E7R2e5Te+qRWWBDOP8VL57QtpCbBfDqqNJ+ahfKM9fzNivMpP4+MRCAvrayhMbPcdVgqj+1MvLaY2rVIn7yUzy/4++vV9IzGG4a0FwDRcQBVjgYT6dJwXVZui9KvntqXVmjeuLOpsUw33bV8c5SGPpO+HNtqlsEPGzsotWFxOCUYJwMZMcH57X7dzW981dJdbl8QxKPh837XhE42eWm5jiJpzkQGSN16YpLoGg/dcz2gBUBkLCgROR9gX3WS7p3r3vMBeE6cR8FZCNJdol8+kc1Sbj0zsXvbQvrrkGI6qiR9iiIIwKjvkDZFcDrQ7VNHz99QQtxvN7tEFzaJ7JUQFRMzm2T/XXRsBwIAATBijzPcjjjPfORY9OWRHdBm5fFa+cd+FTIG6MyupR/X0rX/NM9yPOqiIN3SK0BeT/oWhRs3S4kIgFvFy8x/Mv+OLsB+mh1aemjCsBI69oj0L1AiSfTKRxH67fQKmX7IuKwJw4uNrozZclg+vvuJRdX09BLzdfCiS6U5/dboGZW07JPajOshq4B+nX304IBQ2u4Q7wkYv6CKpi7XdzUgBKBexD05rJj6dDB/iXgsgDPMzP7QHYHTp2NdsDcJmmfU4Oy5100qJz5wQ+RaOLqJkcEn3eXGrtHdlxXRNecG0mYpduv4hYhfZN0DAahH0koz2i37ynnAb+rIEjqjlfn5BrE40aRlYeOrJ3qJTKdxWfwy/XF2JS3akPtWgOhR5qos7hL1lZ37IAANqIk2pTkX/fw1Ebr9xdx2BXik+/JOPqH98fzVv+G5cksJMkVnSBjjhq9iNHjCvpyvOrymR4D+0DuY9tBXN7Za7LzAmf4GAtCAoMjgUeonuRYBK4d08tf/heVhemi++Nc/VU/R2QXm8fbmWrptakXORIAXLj11dYnpWgi3T+lm+mKL/h4C0Agp0bXk/FNeVbfgowjdM6cyq0HPx3GN+N+A6Zx/qnqZfJ05bdpdfYuoJGA+xpBLEeCm/7PXlVC3NoWmg6HIB1AXGRCARgTASr+af87NSV5ae89L2ck/b/VkXhmDlpNHlNAFp3hNX6wUj4+/jtGD86uMvPzZuPhswkcGhah7W69pd4j3APBMyESBmZBs2J7LZ0AADkOfBwQ5oKwceskDYZPfcu40Gp6qvKtPEXU+0fwLV7+bMndVDd0xM7MNO3Z4VNQkad7qCE1cUu3oSb69fumlP/YtopbNxLIC4et/IOghAGnk10ofO1UMtwa27I7T9BVhadlmWIRu6hk0DtYo9ps3w+vb8u6WKN34nJzUV3Z4sC18Xt8rayL07NKwVCHgFOK3XhikLq0LqdBk62+KiZtmK3L55U89GwJg4oVxV4Wof2e/cIDVf/m+2ZMwtg/PWVljaeQ9VQZ/dQd19dE5bb2WXvzU752YqrQy69AQLS9C+nRXnP69LkIvr4nYEoNUQlD+6lvNDszPn7wsTI++Wu2Gd88VNkAABNyQSdBz8Tww9m15grZ9G6f126NGJhruI3O24dTFefBbNy8wFt3U/TuzwzF4ym9sWZX01XlWBtrSoWUm5eEkfbMnbixK2lOVpI1fxSjGSy33X3yw6GnHe4x8BC1/VmBkAA7ZPEEo1zM2AmGWk1sgAILY7bYEBIuXetvW3XFjVsKpATj+CvPuyc6txMcipFbQYmHcLVvxaZRGTpHTFbL4eFffDgGw4J7RlwaJF5mYbbe1UKTUWznQebpv9IwKW10OK8Ywg38ML6Zz25mPulspV/a9/OVfvDFi7FXgTMC4DiYAAbAYETwQ97tLgkb/000X72zjvjUvx81moN97RREN6iqejjubzHi6b9b7NXR/mfXFT9m0M5fPggDYoM+j8jztxKfbco68XF781d/xQ9zY3cd723Nx9WjnpTt6B+nUYz1C6wSctpGZcDeI1yG8szn3exOcrm8m5UMAMqDHgc/nC7Y/3pN211kGj0j7U17gM291jTGqnc2v/uGM4oxE154bEJ6Pl82FX3zemjxtRQ09/3bYFUxk11F2eRAACURZCG44P0CdWnqIR66dvDjIeV6dlx/LnleXZTfvxR/ePUDtWhRkpYXETHjKddYHePGt+hACYJVYmvt5YIzHCC4+3WdM55UG8qQ0iTnA94WTtHFHjF5aVWPMoatwcVfpsk4+6tXem/G0ZsP68uDe7n0J+nBb1Oj6ODXjoQLnTGyEAGRCz+S3PF3Ga9NTc/xHhvKNDTWpnPoNs/fwix6OJikaq1s3wH17zkTMKbfW74g5aGl2imYevIy5Y0sPncTrHIIHzhjgsRRPI8mYeLMVL+AJ1yaJ07Ft2x2ntdtjtGiDvYVE2ampOk+BAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgnQAEQDpSFAgC6hCAAKjjK1gKAtIJQACkI0WBIKAOAQiAOr6CpSAgncB/AVWdqZex3SUXAAAAAElFTkSuQmCC

5. Logs a color preview in the console.

image.previewInConsole();

6. Customize the profile image.

var image = new ProfileImage("CSS Script",{
    textColor: "#ffffff";
    backgroundColor: "#1f6feb";
    fontFamily: "Arial";
    fontSize: 40;
    fontWeight: "normal";
});

Changelog:

v0.0.4 (09/22/2022)

• Update