Gerador de Imagens de Substituição
Crie imagens de substituição SVG personalizadas com dimensões, texto e cores ajustáveis para maquetas e desenvolvimento web.
Executar ferramenta
Este gerador de marcadores de posição visuais permite criar imagens SVG vetoriais com dimensões personalizadas para maquetas de páginas web, testes de interface e esquemas gráficos. O utilizador pode definir a largura e a altura pretendidas, compreendidas entre 1 e 2000 píxeis, com valores padrão de 400 por 300 píxeis respetivamente. O campo de texto permite introduzir uma legenda personalizada; caso o campo permaneça vazio, a ferramenta apresenta automaticamente as dimensões calculadas separadas pelo símbolo de multiplicação. As cores de fundo e do texto podem ser ajustadas através de códigos hexadecimais, utilizando por omissão o cinzento claro (#cccccc) para o fundo e o cinzento escuro (#333333) para a tipografia. O resultado final inclui o código gráfico SVG formatado e o respetivo URI de dados pronto para integração direta no atributo de origem de elementos de imagem, garantindo que qualquer texto inserido seja devidamente protegido contra caracteres especiais de formatação.
Instruções
- Indique a largura pretendida em píxeis entre os limites de 1 e 2000.
- Indique a altura pretendida em píxeis entre os limites de 1 e 2000.
- Introduza o texto a apresentar no centro da imagem ou deixe o campo em branco para exibir as dimensões calculadas.
- Defina o código de cor pretendido para o fundo no formato hexadecimal.
- Defina o código de cor pretendido para o texto no formato hexadecimal.
- Depois de clicar em «Gerar», a imagem aparece na área de resultado, onde pode copiar o código SVG ou o URI de dados para usar no código HTML.
Exemplos
- Largura 600, altura 400, texto 'Banner Principal', fundo #003366 e texto #ffffff para criar um destaque retangular escuro com tipografia branca.
- Largura 150, altura 150, texto vazio, fundo #e0e0e0 e texto #4f4f4f para gerar um quadrado de miniatura com a indicação automática '150×150'.
Perguntas frequentes
O que acontece se não preencher o campo de texto?
Quando o campo de texto fica em branco, a imagem apresenta automaticamente as dimensões calculadas da imagem separadas por um sinal de multiplicação, como por exemplo 400×300.
Quais são as dimensões mínimas e máximas permitidas?
A ferramenta aceita larguras e alturas compreendidas entre 1 e 2000 píxeis. Valores fora deste intervalo são ajustados automaticamente para os limites mais próximos.
Como posso integrar o resultado no meu código HTML?
Pode copiar o código SVG diretamente para o ficheiro HTML ou colar o URI de dados gerado no atributo src da etiqueta de imagem.
Os caracteres especiais no texto personalizado causam erros no SVG?
Não. Todos os caracteres introduzidos no texto são convertidos em entidades seguras antes de serem incorporados no ficheiro SVG e no texto alternativo.