Gerador de Grade Isométrica SVG

Grade isométrica SVG: da engenharia em Cambridge às ilustrações do Stripe

Uma grade isométrica é um sistema de desenho 2D em que os três eixos principais ficam exatamente a 120° um do outro, em vez dos 90° de uma grade cartesiana. O resultado é uma superfície plana que parece 3D — profundidade, altura e largura são projetadas no mesmo plano sem distorção de perspectiva. O termo "isométrico" (do grego "medida igual") foi cunhado por William Farish, professor em Cambridge, em 1822, como forma rigorosa de engenheiros desenharem máquinas antes da era do CAD.

Geometricamente, a grade é montada por linhas a 30°, 90° (verticais) e 150°, que dividem o plano em losangos de ângulos internos 60° e 120°. Cada cubo isométrico é exatamente três desses losangos — topo, face esquerda, face direita — unidos num vértice central. É também por isso que pixel art isométrica tem aquela cara característica de "empilhamento": cada bloco encaixa no mesmo diamante.

Construção em SVG

A forma mais simples de renderizar uma grade isométrica em SVG é desenhar três conjuntos de linhas paralelas espaçadas a 30°, 90° e 150°, recortadas pela viewBox:

<svg viewBox="0 0 600 400" stroke="#666" stroke-width="1">
  <g id="iso">
    <!-- linhas a 30° -->
    <line x1="0" y1="0"   x2="600" y2="346.4"/>
    <!-- linhas a 150° -->
    <line x1="600" y1="0" x2="0"   y2="346.4"/>
    <!-- verticais -->
    <line x1="100" y1="0" x2="100" y2="400"/>
  </g>
</svg>

Como SVG é vetorial, a grade inteira costuma pesar menos de 2 KB por mais densa que seja — bem mais barato que o equivalente raster. O atributo viewBox cuida do scaling responsivo sem re-rasterizar.

Onde grades isométricas são usadas

• Engenharia e arquitetura — desenhos técnicos pré-CAD, vistas explodidas de mecanismos.
• Jogos de tabuleiro — a grade rômbica é prima da hexagonal usada em Catan.
• Videogames — SimCity 2000, Diablo II, Don't Starve, Monument Valley, Crusader Kings II; Unity e Godot têm suporte a tilemap isométrico nativo.
• Ilustração moderna — a tendência "flat-isométrica" explodiu por volta de 2018; o site da Stripe é o exemplo canônico.
• Vídeos explainer corporativos — landing pages B2B SaaS dependem fortemente de cenas isométricas para parecer modernas e "estruturadas".

Isométrico vs axonométrico vs CSS 3D

Axonométrico é o termo guarda-chuva para qualquer projeção paralela — isométrico é o caso particular em que os três eixos têm a mesma escala. Dimétrico (dois iguais) e trimétrico (todos diferentes) são irmãos. Em CSS, dá para aproximar o look isométrico com transform 3D: transform: rotateX(60deg) rotateZ(-45deg), mas é um truque — guias isométricas exatas só com SVG.

Ferramentas vetoriais com suporte nativo a grade isométrica incluem Affinity Designer, Sketch (via plugin) e a grade de perspectiva do Adobe Illustrator. Muitos ilustradores exportam o SVG gerado aqui e usam como camada-guia não imprimível nesses apps.

Performance e acessibilidade

Padrões de linha em SVG são extremamente baratos — mesmo centenas de elementos <line> comprimem para alguns kilobytes. Para ilustrações isométricas complexas (não só a grade), forneça aria-label ou texto descritivo oculto para que leitores de tela transmitam o significado. Para grades puramente de fundo, use aria-hidden="true".

Perguntas frequentes

30° ou 45°? Isométrico de verdade é 30° em relação à horizontal. Uma grade a 45° gera um look "dimétrico" usado em jogos antigos (Zelda: A Link to the Past), mas as proporções dos cubos são diferentes.

Escala responsivamente? Sim — defina viewBox e width: 100% no <svg> e ele escala perfeitamente em qualquer container.

Qual ferramenta de design é melhor para arte isométrica? Affinity Designer já vem com modo de grade isométrica; Illustrator exige setup manual; Figma precisa de plugin.

Dá para editar o SVG no Illustrator? Sim — cada linha é um elemento SVG comum, então importar no Illustrator, Inkscape ou Figma funciona um-para-um.