W3docs
pt
Entrar

SVG Path

Aprenda o elemento SVG <path> e os comandos do atributo d: moveto, lineto, curvas cúbicas, quadráticas, arcos e closepath, com exemplos.

O elemento SVG <path> é a forma mais poderosa e flexível do SVG. Quase todas as outras formas SVG — linhas, polígonos e curvas — podem ser reproduzidas com um <path>. Esta página explica o único atributo que realiza todo o trabalho, o atributo d, e percorre todos os comandos de desenho que ele suporta com seus parâmetros e exemplos executáveis.

Descrição do elemento <path>

O elemento SVG <path> especifica um caminho: uma série de comandos de desenho que movem uma "caneta" imaginária pelo canvas para desenhar linhas, curvas e arcos.

Os caminhos são usados para criar formas complexas combinando vários segmentos retos ou curvos. Formas complexas compostas apenas de linhas retas também podem ser criadas como polilinhas, mas, ao contrário de uma polilinha, um caminho pode desenhar curvas verdadeiras, portanto não precisa de muitos segmentos de linha pequenos para simular uma curva.

No SVG, o sistema de coordenadas começa no canto superior esquerdo: x cresce para a direita e y cresce para baixo. Tenha isso em mente — um valor y maior fica mais abaixo na tela, não mais acima.

A forma de um caminho é definida inteiramente pelo atributo d ("data"). O valor de d é uma string composta de comandos de letra única, cada um seguido pelos números (parâmetros) que o comando necessita.

Comandos do atributo d

Cada comando é uma letra única seguida de seus parâmetros. Os comandos disponíveis são:

ComandoNomeParâmetros
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(nenhum)

Comandos absolutos vs. relativos

Cada comando existe em duas formas. Letras maiúsculas usam coordenadas absolutas — cada x y é medido a partir da origem superior esquerda do SVG (0, 0). Letras minúsculas usam coordenadas relativas — cada valor é um deslocamento a partir da posição atual da caneta (onde o comando anterior terminou).

Os dois caminhos abaixo desenham o mesmo triângulo. O primeiro usa comandos absolutos, o segundo usa relativos:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Lendo a versão relativa: comece em (100, 50), depois mova +100, 0 (para 200, 50), depois mova -50, +100 (para 150, 150), depois z fecha de volta ao início. Comandos relativos são úteis quando você quer transladar uma forma inteira — mude apenas o primeiro M e o restante acompanha.

MoveTo, linhas e fechamento (M, L, H, V, Z)

  • M x y levanta a caneta e a move para (x, y) sem desenhar. Todo caminho deve começar com um moveto.
  • L x y desenha uma linha reta do ponto atual até (x, y).
  • H x desenha uma linha horizontal até a coordenada x x (y permanece o mesmo). É um atalho para um L horizontal.
  • V y desenha uma linha vertical até a coordenada y y (x permanece o mesmo).
  • Z fecha o caminho desenhando uma linha reta de volta ao ponto M mais recente.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Experimente Você Mesmo »

O atributo fill pinta o interior da forma, enquanto stroke pinta o contorno. Para mais opções de contorno (largura, traços, extremidades de linha) veja SVG Stroking.

Curvas de Bézier cúbicas (C e S)

Uma curva de Bézier cúbica curva um segmento usando dois pontos de controle. C x1 y1 x2 y2 x y desenha uma curva do ponto atual até (x, y); (x1, y1) é o ponto de controle do início e (x2, y2) é o ponto de controle do final. A curva é "atraída" em direção a cada ponto de controle.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Aqui a caneta começa em (20, 150), e os dois pontos de controle (20, 20) e (280, 20) puxam a curva para cima formando um arco suave que termina em (280, 150). Usar fill="none" mantém como uma curva aberta em vez de preencher a área abaixo.

A variante suave S x2 y2 x y continua uma curva C (ou S) anterior de forma contínua: tem apenas um ponto de controle porque o primeiro é automaticamente espelhado a partir do ponto de controle final do comando anterior. Isso facilita o encadeamento de curvas em uma onda contínua.

Curvas de Bézier quadráticas (Q e T)

Uma curva de Bézier quadrática é mais simples — usa apenas um ponto de controle. Q x1 y1 x y desenha uma curva do ponto atual até (x, y), curvada em direção ao único ponto de controle (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

O único ponto de controle (150, 20) fica acima do ponto médio e puxa a linha formando uma elevação simétrica. A variante suave T x y continua uma curva Q/T anterior refletindo seu ponto de controle automaticamente, de modo que você fornece apenas o novo ponto final.

Arcos elípticos (A)

O comando de arco desenha uma seção de uma elipse. Ele recebe sete parâmetros:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — os raios horizontal e vertical da elipse.
  • x-axis-rotation — rotação da elipse, em graus.
  • large-arc-flag — 0 para o arco menor, 1 para o arco maior entre os dois pontos.
  • sweep-flag — 0 para percorrer no sentido anti-horário (ângulo negativo), 1 para percorrer no sentido horário (ângulo positivo).
  • x, y — o ponto final do arco.

Como dois pontos em uma elipse podem ser unidos por quatro arcos possíveis, os dois flags escolhem qual será desenhado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Ambos os arcos compartilham os mesmos raios (60 60) e o mesmo início (60, 150) e fim (180, 150). O caminho carmesim usa large-arc-flag 0, sweep-flag 1 para desenhar o arco curto acima da linha; o caminho teal usa large-arc-flag 1, sweep-flag 0 para desenhar o arco grande no sentido contrário. Alterar os flags é a maneira mais fácil de entender como A se comporta.

Dicas

  • Um caminho sempre começa com um moveto. Sem um M/m de abertura, o caminho não renderiza nada.
  • Os números podem ser separados por espaços ou vírgulas — L 100 50 e L100,50 são equivalentes.
  • Comandos idênticos repetidos podem ser implícitos: M10 10 L20 20 L30 30 pode ser escrito como M10 10 L20 20 30 30.
  • Escrever caminhos complexos à mão é propenso a erros; um editor vetorial que exporta SVG geralmente é o fluxo de trabalho melhor, mas entender os comandos permite ler e corrigir a saída.

Páginas relacionadas

  • SVG Reference — uma lista rápida de todos os elementos e atributos SVG.
  • SVG Stroking — controle a largura, cor e traços dos contornos.
  • SVG Line — desenhe um único elemento de linha reta.
  • SVG Polygon — desenhe formas fechadas a partir de uma lista de pontos.

Prática

Prática
Quais dos seguintes são comandos válidos do atributo 'd' de um SVG path?
Quais dos seguintes são comandos válidos do atributo 'd' de um SVG path?
Was this page helpful?