Imagem De Um Losango

Gerar uma imagem de um losango em SVG

Eu gasto bastante tempo criando formas geométricas em SVG para plots técnicos e diagrams de engenharia. A maioria das pessoas que precisa de uma imagem de um losango cai na armadilha de tentar usar ferramentas de desenho genéricas e acaba com vetores mal fechados ou proporções distorcidas. O caminho mais limpo é escrever o caminho diretamente no código. Um losango é um quadrilátero com os quatro lados iguais. A propriedade mais útil na prática é que as diagonais são perpendiculares e se cortam ao meio. Isso significa que, se você conhece o comprimento das duas diagonais d1 e d2, os vértices ficam determinados em O((d1/2), 0), (0, d2/2), (-d1/2, 0), (0, -d2/2) num sistema de coordenadas centrado na origem. Na prática eu centro o losango dentro de um viewBox de 200x200, então o fator de escala fica sendo 100 dividido pelo maior diâmetro desejado.

O que eu realmente uso para gerar uma imagem de um losango

O snippet que eu copio e colei há anos é este aqui:

Isso gera um losango com diagonais verticais de 180 px e horizontais de 180 px — um losango perfeitamente simétrico, ou seja, um quadrado rotacionado 45 graus. Se você quer um losango mais alto, ajuste os valores: por exemplo, pontos="100,10 160,100 100,190 40,100" dá uma diagonal horizontal de 120 px e vertical de 180 px. O atributo stroke-linejoin="miter" é importante. Sem ele, cantos muito agudos se tornam arredondados pelo browsers padrão, e o losango perde aquela aparencia nítida que diagrams técnicos exigem. Eu sempre coloco esse atributo explicitamente, senão o resultado varia entre Chrome e Firefox em casos de ângulos abaixo de 30 graus.

Umapegadinha que eu levei umas três vezes antes de resolver: se você precisar de preenchimento sólido, não use apenas fill="#fff" sem border. OStroke e o fill são camadas separadas no renderizador. O que acontece é que o stroke é desenhado centralizado na borda do polígono, então metade da espessura fica para dentro e metade para fora. Se o seu viewBox for justo, os cantos podem ser cortados pelo overflow. A solução que eu adotei foi expandir o viewBox em 4 px em cada lado quando o stroke-width for 2 ou mais. Outro detalhe que os tutoriais geralmente ignoram: se você precisa exportar para PNG a partir do SVG, o rasterizador do browser aplica anti-aliasing nos cantos. Para uma imagem técnica pura, o que funciona melhor é usar polygon com points exatos e depois rasterizar via um headless browser com dpr=2, ou então usar uma biblioteca como CairoSVG com o flag --dithering disabled. O resultado sai com bordas mais duras, o que importa se o losango vai aparecer em um diagrama de fluxo impresso em preto e branco.

Se o seu caso é só colocar uma imagem de um losango num slide ou num relatório rápido, o snippet acima basta. Se você está construindo um gerador automático de diagramas que precisa variar diagonal e cor dinamicamente, vale a pena envolver o SVG num template JINJA ou num pequeno script Python que calcule os pontos a partir das dimensões desejadas. O cálculo em si é trivial, mas o custo de manutenção de um script dedicado compensa quando o volume de figuras sobe acima de dez por semana. Limitações reais: SVG com polygon não suporta deformações suaves tipo "esticar" o losango mantendo vértices alinhados. Se você precisar de uma animação de morphing entre losango e retângulo, a abordagem certa é usar path com curvas Bézier ou, melhor ainda, um formato vetorial como PDF com transformações afins. O losango em SVG puro é estático e pronto.