CodeForge

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

Animar SVG con CSS: giros, gradientes e iconos que reaccionan

Teoría20 min20 XP

Un SVG inline es HTML con superpoderes: cada parte es un elemento que tu CSS puede seleccionar, transformar y animar. Todo el arsenal de los módulos 10 y 11 — transform, transition, @keyframes — funciona sobre vectores. Pero hay UNA trampa que hace tropezar a todos la primera vez, y hoy la resuelves de entrada.

La trampa: en SVG, el transform gira sobre el origen del lienzo

La vacuna son dos líneas que le dicen al elemento "tu chincheta va en tu propio centro":

giro-svg.css

transform-box: fill-box reencuadra el transform-origin para que center signifique "el centro de esta forma". Con esas dos líneas, todo lo que aprendiste de transformaciones funciona igual sobre SVG. Grábalas: son el 80% de los "¿por qué mi icono SVG gira raro?".

Con y sin la vacuna, lado a lado

Iconos que reaccionan al hover

Como cada parte es un elemento, puedes animar el interior de un icono en respuesta al :hover del contenedor — el detalle que da vida a los botones profesionales:

Nota el stroke="currentColor" de la flecha (lección 4): hereda el blanco del botón, y si mañana cambias el color del texto, la flecha lo sigue sola.

Gradientes que fluyen: cuando CSS no alcanza

Un <linearGradient> como relleno es fácil; hacer que sus colores FLUYAN es donde CSS se queda corto — no puede animar los <stop> internos. Ahí entra SMIL, el sistema de animación NATIVO del SVG, que vive dentro del propio dibujo:

gradiente-flujo.svg
<svg viewBox="0 0 200 60">
<defs>
  <linearGradient id="flujo" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0" stop-color="#6d28d9">
      <animate attributeName="stop-color" values="#6d28d9;#a78bfa;#6d28d9" dur="3s" repeatCount="indefinite"/>
    </stop>
    <stop offset="1" stop-color="#a78bfa">
      <animate attributeName="stop-color" values="#a78bfa;#6d28d9;#a78bfa" dur="3s" repeatCount="indefinite"/>
    </stop>
  </linearGradient>
</defs>
<rect width="200" height="60" rx="10" fill="url(#flujo)"/>
</svg>

Nota honesta sobre SMIL: funciona HOY en todos los navegadores, pero el ecosistema apuesta por CSS y por librerías como GSAP (módulo 16) para lo complejo — SMIL quedó como "soportado pero sin futuro activo". La regla de oro: anima con CSS lo que CSS alcance (transforms, opacidad, fills, strokes, dashoffset), y reserva SMIL o GSAP para lo que no (stops de gradiente, morphing avanzado). No necesitas dominar SMIL; necesitas saber que existe y para qué.

Animas una manecilla de reloj (un rect alto) con rotate, y en vez de girar sobre su base, sale volando en un círculo enorme por la pantalla. ¿El arreglo?

Mini-reto

Toma un icono de engranaje o de estrella (Lucide tiene ambos), pégalo inline y hazlo girar en loop — pero solo funcionará bien cuando le pongas la vacuna de las dos líneas. Pruébalo PRIMERO sin ellas para ver la órbita del error en tu propia pantalla; después arréglalo. Sentir el bug antes de la cura es la mejor forma de no olvidar transform-box.

Qué sigue

Ya giras, rellenas y reaccionas. Quedan los dos efectos que parecen de otra liga: el MORPHING (una forma que se transforma en otra, como un icono de play que se vuelve pausa) y los FILTROS SVG, con los que se hace el famoso efecto "gooey". El gran final técnico del módulo, antes del reto.