Softonic

Construtor de Caminho SVG

Etapa 1 / 2

Clique na área vazia para adicionar pontos. Arraste os pontos para os mover. Remova o último com o botão.

Próximo

O atributo d em um SVG <path> é uma pequena linguagem específica de domínio: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Cada letra é um comando (moveto, lineto, Bézier cúbico, fechar caminho), cada número é uma coordenada ou ponto de controle. Este construtor permite que você clique na tela para posicionar pontos de ancoragem e os arraste para remodelar, vendo o caminho ser desenhado em tempo real. Ative a suavização para transformar os segmentos retos em curvas Bézier cúbicas, feche a forma e então copie o atributo d gerado ou o SVG completo.

Como construir um caminho

  1. 1

    Clique para adicionar pontos

    Cada clique posiciona um ponto de ancoragem na tela; o caminho os conecta em ordem, começando por um `M` (moveto).

  2. 2

    Arraste para remodelar

    Arraste qualquer ponto para movê-lo e remova o mais recente com o botão. O mínimo são dois pontos.

  3. 3

    Reto ou suave

    Deixe os pontos unidos por segmentos retos `L`, ou ative Suavizar para transformá-los em curvas Bézier cúbicas `C`.

  4. 4

    Feche ou deixe aberto

    Ative Fechar caminho para adicionar um `Z` de volta ao início, ou deixe-o aberto para uma polilinha/traço.

  5. 5

    Copie o atributo d

    A string `d` gerada é limpa e separada por espaços, pronta para colar em qualquer SVG; você também pode copiar ou baixar o SVG completo.

Folha de dicas de comando de caminho SVG

O construtor visual acima gera os comandos M, L, C e Z (moveto, linha reta, Bézier cúbico e fechar caminho). O restante do conjunto de comandos abaixo é uma referência para ler e editar manualmente qualquer string d que você cole em outro lugar. Letras maiúsculas usam coordenadas absolutas; letras minúsculas usam deslocamentos relativos da posição atual da caneta.

Cmd Nome Sintaxe
M / m Moveto M x y
L / l Lineto L x y
H / h Lineto horizontal H x
V / v Lineto vertical V y
C / c Bézier cúbico C x1 y1 x2 y2 x y
S / s Bézier cúbico suave S x2 y2 x y
Q / q Bézier quadrático Q x1 y1 x y
T / t Bézier quadrático suave T x y
A / a Arco A rx ry x-axis-rot lg sweep x y
Z / z Fechar caminho Z

Um exemplo prático: um tique arredondado

M 4 12 L 10 18 L 20 6

Três comandos: mover para (4, 12), linha para (10, 18), linha para (20, 6). Adicione stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" ao caminho e você terá um glifo de marca de seleção limpo.

O comando arco é o mais difícil

A rx ry x-axis-rotation large-arc-flag sweep-flag x y leva sete números:

  • rx, ry, raios da elipse
  • x-axis-rotation, rotação da elipse em graus
  • large-arc-flag, 0 para o arco curto, 1 para o longo
  • sweep-flag, 0 para anti-horário, 1 para horário
  • x, y, ponto final

Vire as bandeiras uma a uma para ver como os mesmos dois pontos finais podem se conectar de quatro maneiras diferentes.

Dicas

  • Mantenha os números pequenos e arredondados. Ajuste as coordenadas para a grade de pixels ou meio pixel; evite 17 casas decimais.
  • Prefira comandos maiúsculos quando seu caminho for independente. Minúsculos (relativos) são úteis quando você planeja mover o caminho mais tarde.
  • Feche apenas quando preencher. Se um caminho for estritamente contornado, Z não adiciona nenhuma mudança visual e economiza um byte.
  • Passe pelo SVGO. Zeros finais, espaços duplicados e comandos repetidos colapsam bem.

Perguntas frequentes

Coordenadas em d estão nas mesmas unidades que o viewBox. Um caminho projetado para viewBox="0 0 24 24" colocado em viewBox="0 0 100 100" aparecerá no quarto superior esquerdo. Ou escale as coordenadas ou redimensione o viewBox.

Quando você planeja mover ou repetir o caminho. Comandos relativos mantêm a forma portátil, você pode adicionar um novo M em qualquer lugar e tudo a jusante se move com ele.

Sim. <polyline points="0,0 10,10 20,0"> se torna <path d="M 0 0 L 10 10 L 20 0" />. Um polígono adiciona um final Z. A maioria dos otimizadores faz isso automaticamente porque caminhos comprimem melhor.

Para efeitos de desenho, use CSS stroke-dasharray + stroke-dashoffset. Para mover um elemento ao longo do caminho, use SMIL <animateMotion> com href apontando para o id do caminho.

Não. Comandos de caminho são computados no navegador e nunca enviados a lugar nenhum.

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