Formas SVG básicas: rect, circle y path

SVG utiliza un sistema de coordenadas en el que (0,0) corresponde a la esquina superior izquierda. X aumenta hacia la derecha; Y aumenta hacia abajo. El viewport se define mediante los atributos width y height; el espacio de coordenadas se define mediante el atributo viewBox.

Dibuje rectángulos con <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx y ry redondean las esquinas. El relleno y el contorno se controlan mediante los atributos fill y stroke o CSS. Si omite x e y, sus valores predeterminados son 0,0.

Dibuje círculos con <circle cx="100" cy="100" r="50">. cx y cy son las coordenadas del centro; r es el radio. Los círculos de SVG no tienen un equivalente a los parámetros de ángulo de arco de canvas; siempre son círculos completos.

Dibuje elipses con <ellipse cx="100" cy="100" rx="80" ry="40">. rx es el radio horizontal; ry es el radio vertical. Una elipse cuyos valores rx y ry son iguales equivale a un círculo.

<line x1="0" y1="0" x2="100" y2="100"> dibuja un solo segmento de línea. <polyline points="0,0 100,50 200,0"> dibuja segmentos de línea conectados que pasan por una serie de pares de coordenadas. Ninguno se cierra automáticamente.

<polygon points="100,10 190,190 10,190"> es similar a polyline, pero la forma se cierra automáticamente: una línea conecta el último punto con el primero. Utilice polygon para formas cerradas como triángulos, estrellas y otros polígonos regulares.

path es la forma más versátil de SVG: puede representar cualquier combinación de líneas, arcos y curvas. El atributo d contiene comandos de trazado: M (moveTo), L (lineTo), A (arc), C (curva de Bézier cúbica), Q (curva de Bézier cuadrática), Z (closePath).

Los comandos en mayúsculas utilizan coordenadas absolutas; los comandos en minúsculas utilizan coordenadas relativas. M 100 50 mueve el trazado a (100,50). L 200 150 dibuja una línea hasta (200,150). Z cierra el trazado. A rx ry rotation large-arc sweep x y dibuja un arco.

Las formas SVG aceptan CSS: fill, stroke, stroke-width, opacity y stroke-dasharray. Utilice clases CSS en los elementos SVG para mantener los estilos fácilmente. Las transiciones CSS de SVG funcionan con fill, stroke y opacity para crear cambios de estado fluidos.

El elemento <g> agrupa elementos SVG. Aplique transform, fill o stroke al grupo para que afecten a todos sus elementos hijos. La agrupación permite componer formas complejas que se mueven o transforman juntas, como la esfera de un reloj con todos sus componentes.

Defina formas reutilizables en <defs>: símbolos, degradados y trazados de recorte. Haga referencia a ellos con <use href="#id">. Así evitará duplicar datos complejos de trazados y podrá aplicar transformaciones y estilos a cada instancia mediante el elemento use.

¿Cuál es la diferencia entre polyline y polygon en SVG?

SVG proporciona elementos declarativos para formas (rect, circle, ellipse, line, polyline, polygon) y el versátil elemento path para crear formas complejas mediante los comandos M, L, A, C, Q y Z. Los estilos CSS, la agrupación con g y la reutilización mediante defs/use permiten crear gráficos vectoriales escalables y fáciles de mantener, integrados directamente en HTML.