Formas básicas de SVG: rect circle path

O SVG usa um sistema de coordenadas em que (0,0) corresponde ao canto superior esquerdo. X aumenta para a direita; Y aumenta para baixo. A janela de visualização é definida pelos atributos de largura e altura; o espaço de coordenadas é definido pelo atributo viewBox.

Desenhe retângulos com <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx e ry arredondam os cantos. O preenchimento e o contorno são controlados pelos atributos fill e stroke ou pelo CSS. Se x e y forem omitidos, o padrão será 0,0.

Desenhe círculos com <circle cx="100" cy="100" r="50">. cx e cy são as coordenadas do centro; r é o raio. Os círculos SVG não têm um equivalente aos parâmetros de ângulo do arco do canvas: eles são sempre círculos completos.

Desenhe elipses com <ellipse cx="100" cy="100" rx="80" ry="40">. rx é o raio horizontal; ry é o raio vertical. Uma elipse com rx e ry iguais equivale a um círculo.

<line x1="0" y1="0" x2="100" y2="100"> desenha um único segmento de linha. <polyline points="0,0 100,50 200,0"> desenha segmentos de linha conectados por uma série de pares de coordenadas. Nenhum dos dois é fechado automaticamente.

<polygon points="100,10 190,190 10,190"> é semelhante a polyline, mas a forma é fechada automaticamente: uma linha conecta o último ponto ao primeiro. Use polygon para formas fechadas, como triângulos, estrelas e outros polígonos regulares.

path é a forma SVG mais poderosa: pode representar qualquer combinação de linhas, arcos e curvas. O atributo d contém comandos de caminho: M (moveTo), L (lineTo), A (arc), C (curva de Bézier cúbica), Q (curva de Bézier quadrática), Z (closePath).

Os comandos em maiúsculas usam coordenadas absolutas; os comandos em minúsculas usam coordenadas relativas. M 100 50 move para (100,50). L 200 150 desenha uma linha até (200,150). Z fecha o caminho. A rx ry rotation large-arc sweep x y desenha um arco.

As formas SVG aceitam CSS: fill, stroke, stroke-width, opacity e stroke-dasharray. Use classes CSS nos elementos SVG para manter a estilização. As transições CSS funcionam em fill, stroke e opacity, permitindo mudanças suaves de estado.

O elemento <g> agrupa elementos SVG. Aplique transform, fill ou stroke ao grupo para afetar todos os elementos filhos. O agrupamento permite compor formas complexas que se movem ou se transformam juntas, como um mostrador de relógio com todos os seus componentes.

Defina formas reutilizáveis em <defs>: símbolos, gradientes e caminhos de recorte. Faça referência a elas com <use href="#id">. Isso evita duplicar dados complexos de caminhos e permite aplicar transformações e estilos no nível de cada instância por meio do elemento use.

Qual é a diferença entre polyline e polygon no SVG?

O SVG oferece elementos declarativos de formas (rect, circle, ellipse, line, polyline e polygon) e o versátil elemento path para formas complexas usando os comandos M, L, A, C, Q e Z. A estilização com CSS, o agrupamento com g e a reutilização por meio de defs/use permitem criar gráficos vetoriais escaláveis e fáceis de manter, incorporados diretamente ao HTML.