Softonic

Gerador de Grade SVG

Etapa 1 / 3
Próximo

O fundo de grade é um elemento básico das ferramentas de design (Figma, Framer), páginas de destino voltadas para desenvolvedores (Linear, Vercel) e qualquer interface que busque uma sensação de planta baixa ou papel milimetrado. Também é um dos fundos mais leves que você pode enviar, um <pattern> repetido com dois traços, geralmente abaixo de 300 bytes. Este gerador constrói a grade em qualquer tamanho de célula, peso de traço e cor, para que você possa ajustá-la para uma grade sutil no estilo Figma ou uma aparência ousada de planta baixa.

Como construir a grade

  1. 1

    Defina as dimensões da tela

    Defina largura e altura entre 50 e 3.000 px. Um múltiplo do tamanho da célula evita células parciais nas bordas.

  2. 2

    Escolha um tamanho de célula

    Escolha entre 5 e 500 px. Tente 20-40 px para fundos sutis, 8-12 px para papel milimetrado e 60-80 px para wireframes marcantes.

  3. 3

    Escolha a largura e a cor do traço

    Traços de 0.5-1 px são lidos como linhas limpas; 2+ px começam a parecer desenhados.

  4. 4

    Defina o fundo

    Escolha a cor sólida de fundo que o SVG emitirá. Para uma sobreposição, copie o SVG e altere ou remova o `<rect>` de fundo no seu próprio código.

  5. 5

    Copie o SVG

    Cole no markup ou inline em uma URL de dados CSS para uma imagem de fundo repetível.

O elemento padrão

Cada célula é um único <path> que desenha a borda direita e a borda inferior; repetir este tile constrói toda a grade com apenas dois segmentos de linha por célula, não quatro:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

A mágica está no caminho M 40 0 L 0 0 0 40: começando em (40, 0), linha até (0, 0), linha até (0, 40). Isso desenha a linha superior apenas até o canto superior esquerdo e depois desce pelo lado esquerdo, quando azulejado, cria uma grade completa sem traços duplicados.

Guia de dimensionamento do padrão

Caso de uso Tamanho da célula Traço Sensação de cor
Tela semelhante ao Figma 20-30 px 1 px #e5e7eb em #fafafa
Papel milimetrado 10-12 px 0.5 px #cbd5e1 em #ffffff
Planta baixa 40-60 px 1 px #bfdbfe em #1e3a8a
Wireframe 80 px 1.5 px #9ca3af em #ffffff
Terminal retrô 16 px 1 px #22c55e em #000000

Grades maiores + menores

Se você quiser uma aparência de planta baixa com uma grade fina e uma grade principal mais forte a cada N células, empilhe dois fundos SVG:

.grid {
  background:
    url("data:image/svg+xml,<svg>... grade principal ...</svg>"),
    url("data:image/svg+xml,<svg>... grade menor ...</svg>");
}

O navegador compõe ambos em uma única pintura, sem impacto no desempenho.

Acessibilidade

A grade é puramente decorativa. Aplique-a a um pseudo-elemento (::before com position: absolute; inset: 0; z-index: -1;) para que leitores de tela e analisadores de conteúdo vejam apenas o conteúdo real, não o fundo.

Perguntas frequentes

Traços SVG renderizados em larguras subpixel podem ter antialiasing. Ajuste a largura do traço para pixels inteiros (1, 2) e mova o caminho em 0.5 px (para traços de 1 px) para alinhar com a grade de pixels.

Não com este gerador. Grades hexagonais precisam de um tile que é sqrt(3) vezes mais largo do que alto e um caminho que desenha metade de um hexágono. Use uma ferramenta dedicada de grade hexagonal ou desenhe no Figma.

Este editor emite um fundo sólido. Para uma sobreposição, copie o SVG e altere o primeiro <rect> de fundo para fill="transparent" ou remova-o no seu próprio código.

Sim. Grades SVG têm 200-500 bytes, escalam para cada DPR de forma nítida e permitem que você mude a cor com variáveis CSS. Uma grade PNG geralmente tem 5-20 KB e pixeliza em telas retina.

O editor envia as dimensões e cores atuais ao servidor para renderizar o SVG. No fluxo de três etapas, essas configurações também aparecem na URL da página. Não insira valores confidenciais; não há upload de arquivo-fonte nem projeto salvo.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Criador de Crachás

Crie até 60 crachás imprimíveis a partir de uma lista Nome | segunda linha. Escolha 8 cartões ou 15 etiquetas por página em A4 ou US Letter e imprima localmente.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Ferramenta disponível em outros idiomas