Como gerar imagens de marcador de posição em SVG

Para que serve um marcador de posição em SVG

Um marcador de posição em SVG é útil quando precisa de reservar espaço para uma imagem num protótipo, numa página em construção ou num material de apresentação. Esta ferramenta permite definir a largura, a altura, o texto apresentado, a cor de fundo e a cor do texto. O resultado inclui um gráfico SVG de marcador de posição e uma representação de dados de imagem incorporável, em vez de um endereço público de imagem.

Pode começar pelos valores predefinidos ou adaptar cada opção ao espaço disponível. A largura e a altura são independentes, pelo que pode criar formatos horizontais, verticais ou quadrados. O texto pode identificar a finalidade da área, como “Imagem de capa” ou “Produto”.

Como gerar a imagem

Introduza a largura pretendida. Se não indicar uma largura, é usado o valor predefinido de 400. A largura efetiva fica entre 1 e 2000.
Introduza a altura. Sem um valor definido, é usado o valor predefinido de 300. A altura efetiva também fica entre 1 e 2000.
Escreva o texto que quer mostrar no centro ou na área identificada do marcador. Pode usar uma designação curta, uma medida ou uma indicação editorial. Se o campo ficar vazio, o rótulo apresentado usa as dimensões efetivas, unidas pelo sinal de multiplicação.
Escolha a cor de fundo e a cor do texto. Quando não indicar estas cores, o fundo usa #cccccc e o texto usa #333333.
Inicie a geração e consulte o resultado produzido. Guarde ou utilize a representação adequada ao seu fluxo de trabalho, tendo presente que os valores de largura e altura podem ter sido ajustados ao intervalo permitido.
Se o texto incluir caracteres que poderiam ser interpretados como marcação, verifique apenas o aspeto visual apresentado. O texto mostrado é convertido para uma forma segura antes de ser inserido no SVG e no texto alternativo do elemento de imagem.

Como ler o resultado

O resultado principal é um gráfico SVG de marcador de posição com as dimensões efetivas, as cores escolhidas e o rótulo apresentado. A ferramenta também produz uma representação de dados de imagem incorporável que começa com um prefixo de dados de imagem SVG. Isto permite distinguir entre o conteúdo gráfico gerado e uma ligação para uma imagem alojada: o resultado não deve ser tratado como um URL público.

Se o desenho parecer ter uma proporção diferente da esperada, confirme os valores fornecidos e considere o intervalo de 1 a 2000 para cada dimensão. Um campo de texto vazio não deixa necessariamente o marcador sem rótulo, porque o sistema pode apresentar as dimensões efetivas. A saída é adequada para reservar espaço e comunicar dimensões; não substitui uma fotografia, uma ilustração ou outro conteúdo visual final.

Exemplo prático

Ao preparar o espaço de uma imagem de capa para uma página em construção, uma pessoa precisa de visualizar a proporção 16:9 antes de ter o ficheiro final.

Num projecto de página, introduza 640 de largura, 360 de altura, o texto “Imagem de capa”, um fundo claro e um texto escuro; depois inicie a geração.

É produzida uma imagem SVG de marcador de posição com 640 por 360, o rótulo indicado e as cores escolhidas, acompanhada de uma representação de dados que começa com um prefixo de imagem SVG.

Limitações

As dimensões fora do intervalo de 1 a 2000 não são preservadas, e a representação produzida não é um URL público de imagem.

Erros comuns

Se esperar dimensões superiores a 2000 ou inferiores a 1, a causa provável é o limite aplicado a cada medida. Corrija os valores para o intervalo de 1 a 2000 e confirme a proporção apresentada.

Perguntas frequentes

Posso escolher qualquer largura e altura?

Sim, desde que cada dimensão fique entre 1 e 2000. Se não definir os valores, são usados 400 de largura e 300 de altura.

O que aparece quando não escrevo um texto?

Se o campo de texto estiver vazio, o rótulo apresentado usa as dimensões efetivas, unidas pelo sinal de multiplicação.

A ferramenta cria um URL público para a imagem?

Não. O resultado inclui uma representação de dados de imagem SVG, não um endereço público de imagem.