Generatore di avatar segnaposto (iniziali e motivi)
Generatore di avatar segnaposto
Generatore di avatar segnaposto: avatar con iniziali e motivi in SVG | We.Inc
Crea avatar con iniziali e avatar a motivi geometrici da qualsiasi nome. Stesso nome, stesso avatar. Scarica SVG o PNG, copia un data URI o genera un intero team in una volta. Codice React incluso.
Un avatar segnaposto sostituisce la foto profilo finché qualcuno non ne carica una. Lo schema abituale sono le iniziali della persona su un colore scelto in base al nome, così lo stesso nome ottiene sempre lo stesso avatar. Scrivi dei nomi qui sotto per creare avatar con iniziali, con sfumatura o a motivi, poi scarica i file SVG o PNG oppure copia il codice.
Stili di avatar in questo generatore
Stile
Aspetto
Ideale per
Iniziali
Due lettere su un colore pieno
Pagine del team, commenti, CRM
Iniziali con sfumatura
Due lettere su una sfumatura a due colori
App consumer, brand giocosi
Motivo
Una griglia speculare di 5 per 5 quadrati
Utenti anonimi, account di test, bot
Inserisci un nome o un'intera lista. Da ogni nome si calcola un hash che sceglie colore e motivo, così i risultati restano stabili tra un ricaricamento e l'altro e su dispositivi diversi. Il colore del testo viene scelto automaticamente per il contrasto. Nulla viene caricato.
Scrivi i nomi, uno per riga. Usa nomi reali, indirizzi email o ID utente; ognuno diventa un avatar.
Scegli uno stile, una forma (cerchio, arrotondata o quadrata), una palette e una dimensione.
Le iniziali vengono dalla prima e dall'ultima parola del nome; una sola parola usa le sue prime due lettere.
Scarica qualsiasi avatar come SVG o PNG, copia il suo SVG o il data URI, oppure copia il componente React che li crea nella tua app.
Calcola l'hash su un ID stabile, non su un nome visualizzato, se le persone possono cambiare nome. Altrimenti il colore del loro avatar cambia insieme al nome.
Limita le iniziali a due lettere. Tre lettere a dimensioni piccole risultano strette e più difficili da leggere.
Abbina sempre un avatar al nome della persona, vicino o nel testo alternativo, perché colore e lettere da soli non identificano nessuno per uno screen reader.
Gli avatar SVG restano nitidi a qualsiasi dimensione e pesano poche centinaia di byte, quindi puoi generarli al volo invece di salvare file immagine.
Domande frequenti
Come vengono scelti i colori?
Il nome passa attraverso una piccola funzione di hash (FNV-1a) che lo trasforma in un numero, e quel numero sceglie un colore dalla palette. Lo stesso nome produce sempre lo stesso numero, quindi l'avatar non cambia mai a meno che non cambi il nome.
Il colore del testo è accessibile?
Per ogni sfondo, il generatore calcola se il testo nero o quello bianco ha più contrasto usando la formula di luminanza relativa delle WCAG, e usa quello. Le palette pastello ottengono testo scuro e i colori più intensi testo bianco.
Posso usare questi avatar in un prodotto commerciale?
Sì. Gli avatar sono creati dal tuo browser a partire dai tuoi dati e sono tuoi da usare. L'esempio React in questa pagina si può copiare gratuitamente in qualsiasi progetto.
Genera persone finte per i dati di test?
No. Crea segnaposto astratti dai nomi che fornisci, una scelta più sicura per le demo rispetto a foto di volti reali o generati.
Perché gli avatar deterministici aiutano
Quando ogni persona mantiene lo stesso colore ovunque, si iniziano a riconoscere i colleghi in una lunga lista prima ancora di leggerne il nome. Colori casuali a ogni caricamento della pagina annullano questo vantaggio, e rendono anche instabili screenshot e test.
L'hash dà risultati stabili senza salvare nulla. Il server e il browser possono disegnare entrambi lo stesso avatar a partire dallo stesso ID.
Rendering su larga scala
Per liste con centinaia di persone, mostra l'SVG inline come componente invece di creare file immagine. Evita del tutto le richieste di rete e mantiene il markup leggero.
Se ti serve l'URL di un'immagine, per esempio per un'email o un tag Open Graph, esporta un PNG una volta per persona e mettilo in cache, perché molti client email non mostrano gli SVG.
Componente React di avatar con iniziali
Calcola l'hash del nome, sceglie un colore, sceglie testo nero o bianco per il contrasto e mostra un SVG inline. Nessuna dipendenza.
Tenue
Pastello
Monocromatica
Crea avatar
Nomi, uno per riga (fino a 60)
Stile
Iniziali
Motivo
Forma
Cerchio
Arrotondata
Quadrata
Palette
Dimensione: {n}px
Avatar di {name}
Copia
Usalo in React
Lo stesso avatar con iniziali come piccolo componente da inserire in qualsiasi app React.