Em 2008, quando este post foi originalmente criado, o mundo do design era diferente. O Smashing Magazine tinha acabado de publicar “Vector Girl Avatars” – personagens giras e rechonchudas em formato PSD e AI. Naquela altura, na era Web 2.0, gradientes, sombras e ilustrações complexas estavam no auge. Descarregar pacotes ZIP com ícones e cortá-los manualmente no Photoshop era padrão para qualquer webmaster.
Da perspetiva de 2025, esse conjunto é uma viagem nostálgica ao passado. Mas a necessidade de recursos gráficos gratuitos e de alta qualidade não desapareceu – pelo contrário, evoluiu. Hoje usamos vetores escaláveis (SVG) em vez de rasters pesados (JPG), e imagens estáticas são substituídas por animações Lottie.
Porquê vetores (SVG)?
Porque voltamos a este tema? Porque vetores são a fundação do design web responsivo (RWD).
- Escalabilidade: O mesmo ícone parece nítido no Apple Watch e num ecrã Retina 5K de 27 polegadas.
- Tamanho: Código SVG pesa bytes, não kilobytes. Um ícone bem otimizado é frequentemente menor que 1KB.
- Animação: Cada elemento de um vetor (ex: olho do avatar a piscar) pode ser controlado com CSS ou JavaScript.
Onde encontrar avatares gratuitos em 2025?
Se procuras sucessores dos lendários “Girl Avatars”, a internet atual oferece bibliotecas incríveis, frequentemente a funcionar em base “mix & match” (cria a tua própria personagem).
1. Humaaans (pablo stanley)
Provavelmente a biblioteca mais importante dos últimos anos. Pablo Stanley criou um sistema modular que permite misturar cabeças, troncos, pernas e fundos. Tudo gratuito para uso comercial (CC0).
2. Undraw
Outro clássico de Katerina Limpitsouni. Centenas de ilustrações em estilo unificado, onde podes mudar a cor de destaque com um clique. Perfeito para Landing Pages e estados vazios.
3. Big heads
Uma biblioteca gerada proceduralmente. Se precisas de avatares de utilizador para mockups, o Big Heads gera personagens aleatórias e divertidas em estilo “flat” moderno.
4. Dicebear avatars
Para programadores. É uma API que gera avatares baseados num hash (ex: endereço de email). Lembras-te dos Gravatars? Esta é a sua versão moderna e vetorial.
Como usar SVG no WordPress?
O WordPress bloqueia uploads de SVG por defeito por razões de segurança (SVG é na verdade código XML que pode conter JavaScript malicioso). Como contornar isto profissionalmente?
- Sanitização: Não desbloqueies simplesmente o MIME Type. Usa o plugin Safe SVG ou SVG Support, que “limpa” o código gráfico durante o upload.
- Inline SVG: Em vez de usar a tag
<img>, programadores de temas frequentemente colam código SVG diretamente no HTML. Isto permite mudar a cor do ícone (fill: red;) ao passar o rato usando CSS normal.
Resumo
As “raparigas rechonchudas” do Smashing Magazine entraram para a história do design, mas a ideia que representavam – partilhar recursos de alta qualidade gratuitamente – está mais viva do que nunca. Em 2025, a qualidade do teu projeto não depende de quão bem desenhas, mas de quão habilmente consegues combinar blocos vetoriais prontos num todo coeso.
