Gerador de Placeholder SVG

Como Funciona o Gerador de Placeholders SVG

O Que a Ferramenta Faz

O Gerador de Placeholders SVG cria imagens vetoriais leves de placeholder com dimensões personalizadas, cores de fundo, sobreposições de texto e definições de tipo de letra. Produz a marcação SVG diretamente e como um data URI Base64 pronto a incorporar em HTML ou CSS. Como o SVG é independente da resolução e normalmente tem menos de 1KB, estes placeholders carregam instantaneamente sem pedidos de rede.

Casos de Uso Comuns para Programadores

Os programadores frontend usam placeholders SVG durante a prototipagem para reservar espaço no layout antes de as imagens reais estarem disponíveis, evitando cumulative layout shift (CLS). São úteis em design systems para fallbacks de avatar, skeletons de miniaturas e contentores de imagens responsivas. Os programadores de email incorporam placeholders data URI em templates HTML onde o carregamento de imagens externas pode ser bloqueado por clientes de email.

Formatos, Tipos ou Variantes de Dados

A saída é um documento SVG 1.1 padrão que contém um retângulo preenchido e um elemento de texto centrado. A variante data URI codifica este SVG como uma string Base64 prefixada com 'data:image/svg+xml;base64,' para uso direto em atributos src de img, propriedades CSS background-image ou HTML inline. As dimensões são especificadas em píxeis, mas o SVG escala para qualquer tamanho de contentor sem pixelização, uma vez que é um formato vetorial.

Erros Comuns e Casos Limite

Os URIs de dados não são colocados em cache pelos navegadores de forma independente do documento em que estão incorporados, pelo que usar o mesmo placeholder em muitas páginas aumenta o tamanho total da transferência em comparação com um único ficheiro externo em cache. Etiquetas de texto muito longas podem transbordar a viewBox do SVG se as dimensões forem pequenas. Alguns clientes de e-mail mais antigos não suportam URIs de dados SVG, recorrendo ao ícone de imagem danificada. Os cabeçalhos de Content Security Policy (CSP) podem bloquear URIs de dados 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 prototipagem, sem adicionar dependências de build. Para geração dinâmica de placeholders em produção (por exemplo, fallbacks para imagens carregadas pelos utilizadores), use templating de SVG no lado do servidor ou serviços dedicados como o plaiceholder, que se integram com o seu pipeline de otimização de imagens e conseguem gerar placeholders de imagem desfocada de baixa qualidade (LQIP) a partir de imagens reais.