CodeForge

Maquetación Web Dinámica / SVG: dibujar y animar vectores

Formas básicas: rect, circle, line, polygon

Teoría20 min20 XP

Con cinco etiquetas de forma y dos propiedades para vestirlas, ya puedes dibujar iconos, gráficos y diagramas completos. Esta lección es tu caja de primitivas: rectángulos, círculos, líneas y polígonos, más fill y stroke — el relleno y el contorno que convierten geometría en dibujo.

El detalle que confunde a todos: la Y va al revés

Las primitivas

formas.html
<svg viewBox="0 0 300 100">
<rect x="10" y="20" width="70" height="60" rx="10" fill="#6d28d9"/>
<!-- x,y = esquina superior izquierda; rx = esquinas redondeadas -->
<circle cx="140" cy="50" r="30" fill="#22c55e"/>
<!-- cx,cy = centro; r = radio -->
<ellipse cx="220" cy="50" rx="35" ry="22" fill="#f59e0b"/>
<!-- rx,ry = radios horizontal y vertical -->
<line x1="270" y1="20" x2="290" y2="80" stroke="#1e293b" stroke-width="4"/>
</svg>

Cada forma tiene sus coordenadas propias: el rect se ancla por su esquina, el circle y la ellipse por su centro, la line por sus dos extremos. Un descuido clásico: una <line> sin stroke es INVISIBLE (las líneas no tienen relleno, solo contorno).

Polígonos: conecta los puntos

polygon y polyline reciben una lista de puntos x,y y los unen. El polígono CIERRA la figura (une el último con el primero); la polilínea la deja abierta:

poligonos.html
<svg viewBox="0 0 200 100">
<polygon points="50,10 90,80 10,80" fill="#6d28d9"/>
<!-- un triángulo: tres puntos, figura cerrada -->
<polyline points="110,80 130,40 150,60 190,20" fill="none" stroke="#6d28d9" stroke-width="3"/>
<!-- una línea quebrada (como un gráfico): fill="none" es CLAVE -->
</svg>

Ese fill="none" en la polilínea es obligatorio: sin él, el navegador "cierra" mentalmente la figura y la rellena, y tu gráfico de línea se convierte en una mancha. Regla: contornos abiertos siempre con fill="none".

Vestir las formas: fill y stroke

Las propiedades que más usarás:

  • fill: color de relleno. none para vacío; acepta cualquier color CSS (incluido currentColor, que hereda el color del texto — el truco pro para iconos que cambian de color con su contexto).
  • stroke: color del contorno. stroke-width: su grosor (en unidades del viewBox, no píxeles).
  • stroke-dasharray: convierte el contorno en guiones. Recuérdala: es la protagonista de la lección 5, la de los logos que se dibujan solos.
  • stroke-linecap (round/square) y stroke-linejoin: cómo terminan y se doblan las líneas — el detalle entre un icono tosco y uno fino.

Dato importante: todas estas son propiedades tanto de atributo SVG COMO de CSS. <circle fill="red"> y .icono { fill: red; } hacen lo mismo — y como CSS gana en especificidad, puedes definir el color en la hoja de estilos y cambiarlo al :hover. Ahí empieza la magia de la lección 6.

Dibujas un gráfico de línea con una polyline pero en vez de la línea aparece un polígono relleno de color. ¿Qué olvidaste?

Mini-reto

Dibuja el logo más simple que se te ocurra usando solo primitivas: una casa (un rect de cuerpo + un polygon de techo triangular + un rect de puerta), o una cara (círculo + dos círculos de ojos + una polyline de sonrisa con fill="none"). Restricción útil: mantén el viewBox en 0 0 100 100 y piensa cada coordenada — es el músculo que la próxima lección lleva al siguiente nivel con curvas.

Qué sigue

Rectángulos y círculos te llevan lejos, pero las formas orgánicas — curvas, logos reales, iconos complejos — viven en una sola etiqueta todopoderosa: <path>. Su atributo d parece jeroglífico egipcio; la próxima lección te enseña a leerlo y escribirlo sin pánico.