Desenhos Com Retangulos

Desenhos com retangulos em SVG e HTML

A maioria das pessoas começa com canvas e logo descobre que SVG resolve o problema mais rápido. O element <rect> é simplesmente a ferramenta mais básica que existe para desenhar formas retangulares em vetorial. Ele aceita coordenadas X e Y no canto superior esquerdo, largura e altura, além de rx e ry para arredondar os cantos quando necessário. O código fica basicamente assim: <rect x="10" y="10" width="200" height="150" fill="#3498db" stroke="#2c3e50" stroke-width="2" />

Parece simples demais, e é. O problema real aparece quando você precisa de layouts dinâmicos ou interativos. Eu tinha um projeto onde precisava sobrepor retângulos com posições calculadas a partir de dados de um JSON externo, e o bicho pegou quando os valores vinham em float com muitas casas decimais. O navegador arredondava de formas inconsistentes entre Chrome e Firefox, criando aquelas bordas de 1px que aparecem do nada. A solução foi aplicar Math.round() em todas as coordenadas antes de passar para o SVG, e usar o atributo shape-rendering="crispEdges" no elemento <svg> pai. Isso desliga o anti-aliasing para elementos alinhados à grade e elimina completamente aquele visual embaçado. Outro detalhe que ninguém menciona muito: o atributo viewBox. Quando você define viewBox, as coordenadas do SVG passam a existir num espaço próprio que escala independentemente do tamanho real do elemento na tela. Isso é extremamente útil, mas também é onde a maioria dos iniciantes se perde. Um retângulo com width="100" num viewBox="0 0 800 600" não tem o mesmo tamanho físico se o SVG for exibido com 400px de largura versus 800px. A proporção é mantida, mas o tamanho absoluto muda. Dependendo do que você está construindo, isso pode ser exatamente o que você quer ou um pesadelo. Para desenhos com retangulos mais complexos, como grids ou diagramas técnicos, o ideal é agrupar elementos em <g> e aplicar transforms em nível de grupo. Isso evita repetir cálculos de coordenadas e torna a manutenção muito mais trivial. Se você precisa de algo repetitivo, como uma tabela ou grade, considere gerar o SVG via JavaScript com um loop. Um array de dimensões vira um conjunto de elementos <rect> em segundos.

Limitações que você precisa saber: SVG não é ideal para renderização de muitos milhares de elementos simultâneos. Se o seu projeto envolve mais de 5.000 retângulos animados, por exemplo, canvas ou WebGL vão te dar desempenho muito melhor. SVG brilha em gráficos estatísticos, ícones, diagramas e interfaces — não em jogos ou simulações intensas. Se o seu caso é um desses, pule direto para WebGL com Three.js ou uma biblioteca similar. Para quem quer começar agora, o rect do SVG é o ponto de partida. A especificação completa está na W3C, disponível gratuitamente. Não precisa de biblioteca externa, não precisa de framework. Um arquivo .svg puro funciona em qualquer navegador moderno e pode ser estilizado via CSS da mesma forma que elementos HTML normais. Se estiver construindo algo que envolve muitos retângulos interativos, considere usar uma abordagem híbrida: gere a estrutura com SVG e adicione interatividade com JavaScript vanilla. Frameworks como React ou Vue podem ajudar com estado, mas para desenhos com retangulos puramente visuais, a sobrecarga muitas vezes não vale a pena. O ganho de velocidade com código simples costuma ser maior do que a conveniência de abstração.