Softonic

Gerador de Divisores SVG

Etapa 1 / 3
Próximo

Páginas de destino raramente têm costuras horizontais rígidas entre seções coloridas, elas se misturam através de uma onda curva, uma inclinação angular, uma fileira de triângulos. Todos esses são formas SVG simples: um viewBox dimensionado para a largura da página, um polígono ou caminho preenchido com a cor de fundo da próxima seção, ancorado na parte inferior da seção de saída. Este gerador constrói essa forma em cinco estilos (onda, curva, inclinação, triângulos, escadas) com qualquer largura, altura, cor e inversão vertical que você precisar.

Como construir um divisor de seção

  1. 1

    Escolha um estilo

    Onda (curva S), curva (arco único), inclinação (diagonal), triângulos (ziguezague), escadas (em degraus).

  2. 2

    Defina a largura e a altura

    Largura = a largura da página (1200-1920). Altura = quão alto é o divisor (geralmente 50-200 px).

  3. 3

    Escolha o preenchimento

    Escolha a cor de fundo da próxima seção para que o divisor se misture perfeitamente.

  4. 4

    Inverta verticalmente

    Ative flipY para inverter a forma se precisar que ela aponte para cima em vez de para baixo.

  5. 5

    Copie o SVG

    Cole na parte inferior da seção de saída ou no topo da seção de entrada. Use `preserveAspectRatio="none"` (já incluído) para que a forma se estique com a viewport.

Os cinco estilos e quando usá-los

Estilo Sensação Bom entre
Onda Suave, amigável Hero → depoimentos, paletas pastel
Curva Limpo, elegante Grade de recursos → CTA, design minimalista
Inclinação Moderno, ousado Hero escuro → conteúdo claro, temas de alto contraste
Triângulos Afiado, técnico Ferramentas de desenvolvedor, painéis SaaS
Escadas Estruturado, retrô Tabelas de preços, layouts editoriais

Inserindo um divisor no seu markup

Colocação típica na parte inferior de uma seção:

<section class="hero">
  <!-- conteúdo do hero -->
  <div class="divider" aria-hidden="true">
    <!-- cole o SVG aqui -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Por que preserveAspectRatio="none"

Por padrão, um SVG escala uniformemente. Para um divisor que abrange a viewport, você quer que a forma se estique horizontalmente, uma onda de ponta a ponta, não uma onda pequena centrada na página. preserveAspectRatio="none" informa ao renderizador para distorcer a proporção livremente, que é exatamente o que os divisores precisam.

Acessibilidade e SEO

  • Marque o wrapper como aria-hidden="true" para que leitores de tela ignorem a forma decorativa.
  • Mantenha o SVG abaixo de alguns kilobytes, SVGs inline grandes atrasam a análise do DOM. As saídas aqui estão bem abaixo de 1 KB.
  • Evite imagens rasterizadas para divisores; elas pixelizam em monitores ultra-largos e displays retina.

Perguntas frequentes

Não estritamente. O atributo width do SVG define o tamanho intrínseco, mas com preserveAspectRatio="none" e um width: 100% em CSS, a forma preenche qualquer contêiner. Definir a largura para um número redondo como 1200 mantém os números no caminho fáceis de ler.

Isso geralmente é a linha de base inline padrão do elemento SVG. Adicione display: block (ou vertical-align: bottom) ao SVG para remover o espaço.

Sim. Gere dois ou três divisores em cores e opacidades diferentes e empilhe-os. Desloque cada um por alguns pixels via margin-top ou transform em CSS para um efeito de paralaxe.

O SVG gerado é estático. Para ondas animadas, aplique uma chave de quadro transform: translateX() ao wrapper, ou use duas cópias lado a lado e deslize-as.

Não. Nada é armazenado, o SVG é renderizado fresco a cada vez a partir dos valores atuais do formulário.

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