Text Avatar Generator With JavaScript And SVG – UI Avatar SVG

UI Avatar SVG is a tiny JavaScript library to generate a customizable, SVG-based, square/round avatar from any text you provide.

How to use it:

1. Add the UI Avatar SVG’s JavaScript to the page.

<script src="/path/to/dist/ui-avatar-svg.umd.js"></script>
// or from a CDN
<script src="https://unpkg.com/ui-avatar-svg@latest/dist/ui-avatar-svg.umd.js"></script>

2. Create a new avatar using the following methods:

• .text: Text to display in the avatar
• .round: Round or Squre avatar
• .size: Avatar size in pixels
• .bgColor: Background color
• .textColor: Font color
• .fontSize: Font size
• .fontWeight: Font weight
• .fontFamily: Font family

const myAvatar = (new UIAvatarSvg())
      .text('CSS')
      .round(true)
      .size(64)
      .bgColor('#ff0000')
      .textColor('#ffffff')
      .fontSize(0.4)
      .fontWeight('normal')
      .fontFamily('-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', Sans', 'Droid Sans', 'Helvetica Neue', sans-serif')

3. Generate SVG code so that you can embed the avatar anywhere in your web app.

myAvatar.generate();