Gerador de Placeholder SVG

Gere imagens placeholder em SVG leves com tamanho, cores e texto personalizados. Copie o código SVG ou o data URI, ou baixe o arquivo.

Prévia
Prévia do placeholder SVG
Saída: 

  

  

    
    
    
  



    

    

      
Crie imagens placeholder em SVG leves direto no seu navegador. Defina a largura e a altura, escolha as cores de fundo e do texto, adicione um rótulo opcional e obtenha na hora um código SVG limpo ou um data URI pronto para uso — sem serviço externo de placeholder, sem requisições de rede e sem rastreamento. Copie o markup ou baixe o arquivo .svg com um clique.

      

        
O que é um gerador de placeholder SVG?

        
Um gerador de placeholder SVG cria uma imagem placeholder vetorial simples — um retângulo colorido com texto centralizado opcional mostrando as dimensões — sem chamar um serviço remoto como placeholder.com ou placehold.it. Como a saída é um SVG inline, ela permanece nítida em qualquer tamanho, pesa apenas alguns bytes e você pode usá-la diretamente no seu HTML, CSS ou mockup de design.

        
      

      

        
Como gerar um placeholder SVG

        
Informe o tamanho que precisa, escolha as cores, adicione um texto opcional e então copie o código ou baixe o arquivo.

        
  1. Defina a largura e a altura em pixels do placeholder.
  2. Escolha uma cor de fundo e uma cor de texto.
  3. Deixe o rótulo em branco para mostrar as dimensões ou digite seu próprio texto.
  4. Escolha código SVG ou data URI como formato de saída.
  5. Clique em Copiar para pegar o markup ou em Baixar SVG para salvar o arquivo.

      

      

        
Por que usar este gerador de placeholder SVG?

        
  • Prévia ao vivo atualizada na hora conforme você muda tamanho, cores e texto.
  • Gera o markup SVG bruto ou um data URI autocontido para usar em img src ou CSS.
  • Independente de resolução — placeholders vetoriais ficam nítidos em qualquer tela.
  • Tamanho de arquivo minúsculo, sem requisição HTTP extra a um serviço de placeholder.
  • 100% privado — tudo roda localmente no seu navegador.
  • Baixe o placeholder como um arquivo .svg reutilizável com um clique.

      

      

        
Perguntas frequentes

        

          
Qual é a diferença entre código SVG e data URI?

          
O código SVG é o markup  bruto que você pode colar diretamente em uma página HTML ou salvar como um arquivo .svg. Um data URI codifica esse mesmo SVG em uma única string que começa com data:image/svg+xml, que você pode usar como atributo src de uma img ou como background-image no CSS, sem precisar de um arquivo separado.

        

        

          
Por que usar um placeholder SVG em vez de um serviço como placeholder.com?

          
Um placeholder SVG inline não tem dependência de rede, então carrega instantaneamente e continua funcionando offline ou atrás de um firewall. Ele também é independente de resolução e evita enviar requisições a um serviço de terceiros, o que é melhor para privacidade e confiabilidade.

        

        

          
Posso usar o placeholder como imagem de fundo no CSS?

          
Sim. Mude a saída para Data URI, copie a string e use-a como background-image: url('...') na sua folha de estilos. Como ela é autocontida, não é preciso nenhum arquivo ou requisição extra.

        

        

          
O tamanho da fonte é ajustado automaticamente?

          
Sim. Deixe o campo de tamanho da fonte em branco ou em zero e o rótulo é dimensionado automaticamente para caber no placeholder. Informe um valor se quiser sobrescrever com um tamanho de fonte específico.