Softonic

Gerador de Formas SVG

Etapa 1 / 2

A maioria dos sistemas de design precisa apenas de um pequeno vocabulário de formas: um círculo para um avatar, um quadrado para um chip de status, um triângulo para um ícone de play, uma estrela para uma avaliação, um hexágono para um crachá. Este gerador renderiza todas as sete formas padrão (círculo, quadrado, triângulo, estrela, hexágono, pentágono, coração) com geometria perfeitamente calibrada, pontos da estrela no raio interno correto, hexágonos e pentágonos orientados com a ponta para cima, coração centrado na tela, e gera o <svg> pronto para colar.

Como gerar uma forma

  1. 1

    Escolha uma forma

    Círculo, quadrado, triângulo, estrela, pentágono, hexágono ou coração.

  2. 2

    Defina o tamanho e o contorno

    Tamanho da tela em pixels. A largura do contorno controla o peso do contorno; 0 remove o contorno.

  3. 3

    Escolha a cor de preenchimento e contorno

    Qualquer cor hexadecimal. Defina o preenchimento como `none` para formas ocos.

  4. 4

    Para estrelas, defina os pontos

    O primitivo da estrela aceita de 3 a 12 pontos. Cinco é clássico; sete dá uma aparência de crachá de xerife.

  5. 5

    Copie o SVG

    A marcação usa o primitivo SVG correspondente (`<circle>`, `<rect>`, `<polygon>`, `<path>`) para bytes mínimos.

Geometria da forma em um relance

Forma Primitivo SVG Parâmetros que importam
Círculo <circle> raio, preenchimento, contorno
Quadrado <rect> largura, altura, contorno (sem rx aqui)
Triângulo <polygon> (3 pontos) equilátero, apontando para cima
Estrela <polygon> (N × 2) pontos (3-12), razão entre raio interno/exterior
Pentágono <polygon> (5 pontos) orientado com o ponto para cima
Hexágono <polygon> (6 pontos) orientado com o ponto para cima (gire 30° para plano)
Coração <path> com Béziers centrado na tela, simétrico

Exemplo de saída: uma estrela de cinco pontas

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

O raio interno é fixado em 40% do raio externo, o que corresponde às proporções clássicas usadas em estrelas de bandeiras e troféus.

Casos de uso

  • Avatares e máscaras, círculo como um clip-path para fotos de perfil.
  • Chips de status, quadrado (arredondado via CSS border-radius ou um rx posterior) como um indicador de bandeira simples.
  • Interfaces de avaliação, estrelas preenchidas, meio preenchidas e contornadas para escalas de 0-5.
  • Crachás e emblemas, hexágono com texto ou ícone interno.
  • Botões de afeto, coração para curtidas, listas de desejos e salvamentos.

Por que primitivos SVG em vez de um caminho genérico

Usar <circle> ou <polygon> em vez do equivalente <path>:

  • É menor em bytes para formas simples (10-30 bytes).
  • É mais fácil de animar, atributos como r, cx, cy, points são diretamente animáveis com CSS ou GSAP.
  • Lê-se mais claramente em inspetores e diffs.

Para formas complexas (blobs, ícones, logotipos), os caminhos vencem porque podem descrever curvas e segmentos mistos em um único elemento.

Acessibilidade

Todos os SVGs gerados são decorativos por padrão. Se a forma carrega significado (um círculo vermelho = erro, um check verde = sucesso), envolva-a em um pai com role="img" e um aria-label, ou adicione um <title> como filho dentro do SVG.

Perguntas frequentes

O raio interno determina a “gordura” de cada braço. Este gerador usa interno = 40% do externo para uma aparência equilibrada. Para obter uma estrela mais afiada, diminua a razão no SVG de saída (por exemplo, 25%); para uma estrela mais arredondada, tipo Lego, aumente para 60%.

Este gerador gera um <rect> simples. Adicione rx="8" ry="8" ao retângulo para arredondar os cantos, ou use a propriedade CSS border-radius se você envolver o SVG.

Sim, envolva o SVG em um pai com transform: rotate(30deg), ou edite o caminho: mude o ângulo inicial em 30°. O gerador padrão é com ponto para cima porque corresponde à maioria dos designs de crachás.

Sim. O SVG usa viewBox apropriado, coordenadas em pixels inteiros e marcação de comprimento mínimo. Você pode inseri-lo no React, Vue, Astro, e-mail ou HTML simples sem modificação.

Não. Os parâmetros da forma são usados para renderizar o SVG para a solicitação atual e descartados.

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.

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.

Conversor de Pantone para HEX

Converta cores Pantone PMS para os valores mais próximos de HEX, RGB e CMYK para correspondência em tela e impressão, com pré-visualização de amostras.

Ferramenta disponível em outros idiomas