Gerador de Placeholder SVG

Como funciona o Gerador de Placeholder SVG

O Que a Ferramenta Faz

O Gerador de Placeholder SVG cria imagens vetoriais leves de placeholder com dimensões personalizadas, cores de fundo, sobreposições de texto e configurações de fonte. Ele gera o markup SVG diretamente e também como uma data URI Base64 pronta para incorporar em HTML ou CSS. Como o SVG é independente de resolução e normalmente tem menos de 1KB, esses placeholders carregam instantaneamente sem requisições de rede.

Casos de Uso Comuns para Desenvolvedores

Desenvolvedores frontend usam placeholders SVG durante a prototipagem para reservar espaço no layout antes que as imagens reais estejam disponíveis, evitando cumulative layout shift (CLS). Eles são úteis em design systems para fallbacks de avatar, skeletons de miniaturas e contêineres de imagem responsivos. Desenvolvedores de e-mail incorporam placeholders como data URI em templates HTML onde o carregamento de imagens externas pode ser bloqueado por clientes de e-mail.

Formatos de Dados, Tipos ou Variantes

A saída é um documento padrão SVG 1.1 contendo um retângulo preenchido e um elemento de texto centralizado. A variante data URI codifica esse SVG como uma string Base64 prefixada com 'data:image/svg+xml;base64,' para uso direto em atributos img src, propriedades CSS background-image ou HTML inline. As dimensões são especificadas em pixels, mas o SVG se ajusta a qualquer tamanho de contêiner sem pixelar, pois é um formato vetorial.

Armadilhas Comuns e Casos de Borda

Data URIs não são armazenadas em cache pelos navegadores de forma independente do documento em que estão incorporadas; portanto, usar o mesmo placeholder em muitas páginas aumenta o tamanho total transferido em comparação com um único arquivo externo armazenado em cache. Rótulos de texto muito longos podem ultrapassar o viewBox do SVG se as dimensões forem pequenas. Alguns clientes de e-mail mais antigos não oferecem suporte a data URIs de SVG, recorrendo a um ícone de imagem quebrada. Cabeçalhos de Content Security Policy (CSP) podem bloquear data URIs inline se 'data:' não estiver incluído em img-src.

Quando Usar Esta Ferramenta vs Código

Use esta ferramenta do navegador para gerar rapidamente imagens placeholder pontuais durante wireframing ou prototipação, sem adicionar dependências de build. Para geração dinâmica de placeholders em produção (por exemplo, fallbacks para imagens enviadas por usuários), use templates de SVG no lado do servidor ou serviços dedicados como o plaiceholder, que se integram ao seu pipeline de otimização de imagens e podem gerar placeholders desfocados de baixa qualidade (LQIP) a partir de imagens reais.