Generator awatarów zastępczych: awatary z inicjałów i wzorów jako SVG | We.Inc
Twórz awatary z inicjałów i geometrycznych wzorów dla dowolnego imienia. To samo imię, ten sam awatar. Pobierz SVG lub PNG, skopiuj data URI albo wygeneruj cały zespół naraz. Zawiera kod React.
Awatar zastępczy zastępuje zdjęcie profilowe, dopóki ktoś nie wgra własnego. Najczęściej są to inicjały osoby na kolorze wybranym na podstawie jej imienia, więc to samo imię zawsze daje ten sam awatar. Wpisz poniżej imiona, aby stworzyć awatary z inicjałów, z gradientem lub ze wzorem, a następnie pobierz pliki SVG lub PNG albo skopiuj kod.
Style awatarów w tym generatorze
Styl
Wygląd
Najlepszy do
Inicjały
Dwie litery na jednolitym kolorze
Strony zespołu, komentarze, systemy CRM
Inicjały z gradientem
Dwie litery na przejściu dwóch kolorów
Aplikacje konsumenckie, swobodne marki
Wzór
Symetryczna siatka kwadratów 5 na 5
Anonimowi użytkownicy, konta testowe, boty
Wpisz jedno imię albo całą listę. Każde imię jest haszowane, aby wybrać jego kolor i wzór, więc wyniki są stałe po przeładowaniu strony i na różnych urządzeniach. Kolor tekstu jest automatycznie dobierany pod kątem kontrastu. Nic nie jest wysyłane na serwer.
Wpisz imiona, po jednym w wierszu. Użyj prawdziwych imion, adresów e-mail lub identyfikatorów użytkowników; każdy wpis staje się jednym awatarem.
Wybierz styl, kształt (koło, zaokrąglony lub kwadrat), paletę i rozmiar.
Inicjały pochodzą z pierwszego i ostatniego słowa imienia; pojedyncze słowo daje swoje pierwsze dwie litery.
Pobierz dowolny awatar jako SVG lub PNG, skopiuj jego SVG lub data URI albo skopiuj komponent React, który tworzy je w Twojej własnej aplikacji.
Haszuj stały identyfikator, a nie wyświetlaną nazwę, jeśli użytkownicy mogą się przemianować. W przeciwnym razie kolor awatara zmieni się razem z nazwą.
Ogranicz inicjały do dwóch liter. Trzy litery w małych rozmiarach robią się ściśnięte i trudniejsze do odczytania.
Zawsze umieszczaj imię osoby obok awatara lub w tekście alt, ponieważ sam kolor i litery nie identyfikują nikogo dla czytnika ekranu.
Awatary SVG są ostre w każdym rozmiarze i ważą kilkaset bajtów, więc możesz generować je w locie zamiast przechowywać pliki graficzne.
Najczęściej zadawane pytania
Jak wybierane są kolory?
Imię przechodzi przez niewielką funkcję skrótu (FNV-1a), która zamienia je na liczbę, a ta liczba wybiera kolor z palety. To samo imię zawsze daje tę samą liczbę, więc awatar nigdy się nie zmienia, chyba że zmieni się imię.
Czy kolor tekstu jest dostępny?
Dla każdego tła generator oblicza, czy czarny czy biały tekst ma większy kontrast, korzystając ze wzoru na luminancję względną z WCAG, i używa lepszego z nich. Palety pastelowe dostają ciemny tekst, a mocniejsze kolory biały.
Czy mogę używać tych awatarów w produkcie komercyjnym?
Tak. Awatary tworzy Twoja własna przeglądarka na podstawie Twoich danych i możesz ich używać. Przykład React na tej stronie możesz bezpłatnie skopiować do dowolnego projektu.
Czy to narzędzie generuje fikcyjne osoby do danych testowych?
Nie. Tworzy abstrakcyjne zastępniki z podanych przez Ciebie imion, co jest bezpieczniejszym wyborem do wersji demo niż zdjęcia prawdziwych lub wygenerowanych twarzy.
Dlaczego deterministyczne awatary pomagają
Gdy każda osoba wszędzie ma ten sam kolor, ludzie zaczynają rozpoznawać współpracowników na długiej liście, zanim przeczytają nazwisko. Losowe kolory przy każdym ładowaniu strony niweczą ten efekt, a do tego sprawiają, że zrzuty ekranu i testy stają się niestabilne.
Haszowanie daje stałe wyniki bez przechowywania czegokolwiek. Serwer i przeglądarka mogą narysować ten sam awatar na podstawie tego samego identyfikatora.
Renderowanie na dużą skalę
W przypadku list z setkami osób renderuj SVG inline jako komponent zamiast tworzyć pliki graficzne. Całkowicie omija to żądania sieciowe i utrzymuje mały rozmiar znaczników.
Jeśli potrzebujesz adresu URL obrazu, na przykład do e-maila lub tagu Open Graph, wyeksportuj PNG raz dla każdej osoby i zapisz go w pamięci podręcznej, ponieważ wiele klientów poczty nie wyświetla SVG.
Komponent React z awatarem z inicjałów
Haszuje imię, wybiera kolor, dobiera czarny lub biały tekst dla kontrastu i renderuje SVG inline. Bez zależności.
Spokojna
Pastelowa
Mono
Twórz awatary
Imiona, po jednym w wierszu (maksymalnie 60)
Styl
Inicjały
Wzór
Kształt
Koło
Zaokrąglony
Kwadrat
Paleta
Rozmiar: {n}px
Awatar dla {name}
Kopiuj
Użyj w React
Ten sam awatar z inicjałów jako mały komponent, który możesz wstawić do dowolnej aplikacji React.