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:
<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 atributodpara 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:
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.
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.
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.
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.
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.
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.
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.
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.
Arc To (A ou a)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y: Desenha um arco elíptico.
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
- 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. - Compactação: Usa uma notação compacta para definir formas complexas, economizando espaço no código.
- Interatividade: Pode ser combinado com eventos de JavaScript para criar gráficos interativos e animados.
- 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.
