SVG Avatar Iniciais

Avatares de iniciais em SVG: placeholders autocontidos para qualquer usuário

Um avatar de iniciais é o fallback que todo produto moderno usa quando o usuário não subiu foto de perfil: um círculo colorido (ou quadrado arredondado) com uma ou duas letras no centro. Gmail usa, Slack usa, Notion usa, Discord usa. Construir em SVG em vez de HTML te dá uma imagem vetorial que escala perfeitamente para qualquer tamanho, codifica cor e letras em uma única string que dá para guardar como data URI, e evita o layout shift que aconteceria enquanto uma imagem remota carrega. A estrutura canônica é um círculo mais um nó <text> centralizado:

<svg viewBox="0 0 80 80" width="40" height="40">
  <circle cx="40" cy="40" r="40" fill="#3b82f6"/>
  <text x="40" y="50" text-anchor="middle"
    fill="white" font-size="32"
    font-family="system-ui, sans-serif">AB</text>
</svg>

Hash do nome em cor estável

A mesma pessoa deve sempre ver a mesma cor, mesmo entre sessões e dispositivos, sem lookup do lado do servidor. O truque é hashear a string do nome e mapear o resultado em um espaço de cor. Um acumulador simples tipo djb2 mais conversão para HSL dá 360 tonalidades distintas e o mesmo nome sempre produz a mesma hue:

let hash = 0;
for (let i = 0; i < name.length; i++) {
  hash = name.charCodeAt(i) + ((hash << 5) - hash);
}
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, 70%, 50%)`;

Fixar saturação em ~70% e luminosidade em 45–55% mantém cada resultado vibrante mas nunca tão pálido a ponto do texto branco perder contraste. Para paletas mais brand-safe, mapeie o módulo do hash em uma lista curada de ~12 cores (o Slack faz assim).

Extrair iniciais: uma vs duas letras

• Uma letra — estilo WhatsApp: primeiro caractere da primeira palavra. Mais simples e amigável em tamanhos thumbnail mobile.
• Duas letras — estilo Slack e Notion: primeira letra da primeira palavra + primeira letra da última. Lê como um monograma.
• Línguas CJK / RTL — use o primeiro glifo como está (um único caractere CJK já carrega informação suficiente); garanta que o font-family do SVG tenha fallback para fonte de sistema que cobre o script.
• Emoji / números no nome — pule ao extrair; se sobrar nada, caia para ? ou o primeiro codepoint Unicode da string original.

Acessibilidade, contraste e casos de uso

O avatar nunca deve ser a única maneira de identificar o usuário. Envolva em um nó com role="img" e aria-label="Avatar de João Silva" para leitores de tela anunciarem uma descrição significativa. Para contraste, use sempre texto branco ou quase branco (funciona contra a paleta HSL vibrante acima) — ou compute a luminância relativa e escolha preto/branco dinamicamente para cumprir WCAG 4.5:1. Casos de uso comuns: fallback de foto de perfil antes da imagem carregar (evita CLS), threads de comentário, menções em chat (Discord, Slack), listagens de time (Notion, Linear), tiles de participante em videochamada (Zoom, Google Meet).

Bibliotecas, Gravatar e entrega via data URI

Se preferir não escrever do zero, serviços como ui-avatars.com (Sebastian Lasse, API grátis), DiceBear (Florian Körner, vários estilos), e Boring Avatars (Hayk An) geram avatares similares a partir de um parâmetro de nome. O Gravatar é diferente — exige hashear o email do usuário e fazer round-trip num servidor terceiro, o que vaza hash de email e adiciona requisição; avatares de iniciais são autocontidos e pesam menos de 500 bytes quando inline como data URI (data:image/svg+xml,...). Em SSR, dá para embutir o SVG direto no HTML e pular a requisição de imagem inteira.

Perguntas frequentes

Como fazer fallback de foto de perfil ausente? Renderize o avatar de iniciais por padrão e sobreponha o <img> em cima. Se a imagem falhar, o avatar continua visível. Evita o flash do ícone de imagem quebrada e o layout shift.

A cor fica a mesma em dispositivos diferentes? Sim, desde que a string de entrada seja idêntica. O hash é determinístico e depende só do nome, então o mesmo usuário mostra o mesmo círculo em todo lugar.

Funciona com caracteres CJK ou árabe? Sim — o <text> do SVG renderiza qualquer codepoint Unicode. Garanta que a lista de font-family inclua um fallback que cobre o script (ex: system-ui ou fontes CJK específicas).

Devo cachear o avatar? Se o nome é fixo, renderize uma vez e reutilize o data URI. Para lista dinâmica (resultados de busca), regenere inline — a ~500 bytes cada, 1000 avatares custam menos que um JPEG médio.