Qual o uso e a função de SGV Path?

O SVG path (Scalable Vector Graphics path) é uma poderosa funcionalidade do SVG usada para definir formas complexas, como curvas, linhas, e até figuras geométricas mais elaboradas, dentro de um único elemento <path>.

A principal função do SVG path é permitir a criação de desenhos vetoriais complexos de forma compacta e eficiente.

Uso do SVG Path

O uso de um SVG path envolve o elemento <path> dentro de um documento SVG, definido por atributos e comandos específicos.

Aqui está um exemplo básico de como um SVG path é utilizado:

xml

<svgwidth="100"height=xmlns="http://www.w3.org/2000/svg"><pathd="M10 10 H 90 V 90 H 10 L 10 10"stroke="black"fill= "transparent"/></svg>

Neste exemplo:

• O elemento <svg> define a área de desenho.
• O elemento <path> usa o atributo d para especificar os comandos de desenho.

Comandos Básicos de um SVG Path

O atributo d do elemento <path> contém uma série de comandos e coordenadas que definem a forma a ser desenhada. Aqui estão alguns dos comandos mais comuns:

1. Move To (M ou m)

   • M x y: Move a "caneta" para as coordenadas (x, y) absolutas.
   • m dx dy: Move a "caneta" para as coordenadas (dx, dy) relativas ao ponto atual.

2. Line To (L ou l)

   • L x y: Desenha uma linha reta até as coordenadas (x, y) absolutas.
   • l dx dy: Desenha uma linha reta até as coordenadas (dx, dy) relativas.

3. Horizontal Line To (H ou h)

   • H x: Desenha uma linha horizontal até a coordenada x absoluta.
   • h dx: Desenha uma linha horizontal até a coordenada dx relativa.

4. Vertical Line To (V ou v)

   • V y: Desenha uma linha vertical até a coordenada y absoluta.
   • v dy: Desenha uma linha vertical até a coordenada dy relativa.

5. Curve To (C ou c)

   • C x1 y1, x2 y2, x y: Desenha uma curva de Bézier cúbica até (x, y) usando (x1, y1) e (x2, y2) como pontos de controle absolutos.
   • c dx1 dy1, dx2 dy2, dx dy: Desenha uma curva de Bézier cúbica até (dx, dy) relativa.

6. Smooth Curve To (S ou s)

   • S x2 y2, x y: Desenha uma curva de Bézier cúbica suave até (x, y) usando (x2, y2) como ponto de controle absoluto.
   • s dx2 dy2, dx dy: Desenha uma curva de Bézier cúbica suave até (dx, dy) relativa.

7. Quadratic Bézier Curve To (Q ou q)

   • Q x1 y1, x y: Desenha uma curva de Bézier quadrática até (x, y) usando (x1, y1) como ponto de controle absoluto.
   • q dx1 dy1, dx dy: Desenha uma curva de Bézier quadrática até (dx, dy) relativa.

8. Smooth Quadratic Bézier Curve To (T ou t)

   • T x y: Desenha uma curva de Bézier quadrática suave até (x, y) absoluta.
   • t dx dy: Desenha uma curva de Bézier quadrática suave até (dx, dy) relativa.

9. Arc To (A ou a)

   • A rx ry x-axis-rotation large-arc-flag sweep-flag x y: Desenha um arco elíptico.

10. Close Path (Z ou z)

    • Z: Fecha o caminho, desenhando uma linha reta de volta ao ponto inicial.

Exemplo Completo

Aqui está um exemplo mais completo que usa vários comandos de SVG path:

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="
    M 10 80 
    C 40 10, 65 10, 95 80 
    S 150 150, 180 80
    " stroke="black" fill="transparent"/>
  <path d="
    M 50 150
    Q 100 50, 150 150
    " stroke="blue" fill="transparent"/>
</svg>

• Primeiro <path>:

  • Começa em (10, 80).
  • Desenha uma curva cúbica de Bézier até (95, 80) com pontos de controle (40, 10) e (65, 10).
  • Desenha uma curva cúbica suave até (180, 80) com ponto de controle (150, 150).

• Segundo <path>:

  • Começa em (50, 150).
  • Desenha uma curva quadrática de Bézier até (150, 150) com ponto de controle (100, 50).

Funções do SVG Path

1. Flexibilidade de Desenho: Permite a criação de formas complexas que não são possíveis com elementos SVG básicos como <rect>, <circle>, etc.
2. Compactação: Usa uma notação compacta para definir formas complexas, economizando espaço no código.
3. Interatividade: Pode ser combinado com eventos de JavaScript para criar gráficos interativos e animados.
4. Estilização: Permite aplicar estilos complexos como preenchimentos, traços, gradientes e padrões.

Conclusão

O SVG path é uma ferramenta essencial para desenhar gráficos vetoriais escaláveis, oferecendo flexibilidade e controle detalhado sobre a forma e o design. Entender os comandos básicos e como usá-los permite criar desde simples linhas até desenhos complexos em gráficos SVG.