Placeholder Avatar Generator
Generate SVG placeholder avatars from initials.
Overview
The Placeholder Avatar Generator turns a name or initials into a clean SVG avatar — coloured background, centred monogram, optional circular or rounded-square mask. The result is a self-contained SVG you can paste into a CSS background, an <img> src data URI or a downloadable file, perfect when a user has not uploaded a profile picture yet.
The generator is aimed at frontend developers building user lists, designers prototyping comment threads and admins seeding staff directories. Long-tail searches like "svg initials avatar generator", "placeholder profile picture from name" and "deterministic avatar colour from string" all resolve here.
How it works
The tool takes the input name, splits on whitespace, picks the first letter of the first and last words and renders them as uppercase initials. The background colour is derived deterministically from the input by hashing the string with FNV-1a and folding the result into a curated palette of accessible foreground/background pairs. Because the colour comes from the hash, "Ada Lovelace" always lands on the same swatch — useful when the same user reappears in a list.
Output is a hand-rolled SVG (no rasterisation) so it scales to any pixel density without blurring. The font metrics are baked into the path so the avatar renders identically across browsers, even when the system's default sans-serif differs. A circular or rounded-rectangle clip path is applied via <clipPath> rather than a CSS class, so the SVG looks correct when embedded in environments without external stylesheets.
Examples
"Ada Lovelace" → AL on lavender background
"Grace Hopper" → GH on teal background
"X Æ A-12" → XÆ falls back to first two glyphs
Single name "cher" → C centred, 100% square
FAQ
Is the colour stable for the same name?
Yes. The colour is hashed from the input, so the same name always produces the same swatch across reloads and devices.
Does the SVG include the font?
Initials are converted to paths so the avatar renders identically without depending on any local font.
Can I use it as an <img> src?
Yes. Copy the SVG as a data URI and paste it directly into the src attribute. The MIME type is image/svg+xml.
What size should I use?
The SVG is resolution-independent. Wrap it in a CSS box of the desired pixel size and it stays crisp.
Does it support emoji or Unicode?
Basic Latin and common diacritics render well. Emoji and complex scripts may fall back to the first base glyph.