Guía de animaciones SVG: Métodos con CSS, SMIL y JavaScript

Actualizado junio de 2026 · 7 minutos de lectura

Los SVG no son meras imágenes estáticas: son documentos programables que se pueden mover, cambiar de forma y responder a la interacción del usuario. A diferencia de las animaciones en formato GIF o vídeo, las animaciones SVG son independientes de la resolución, muy eficientes en cuanto a tamaño de archivo y se pueden controlar completamente por código. Aquí te explicamos cómo animar SVG usando tres métodos diferentes.

Método 1: Animaciones CSS

CSS es la forma más sencilla de animar elementos SVG. La mayoría de propiedades CSS que funcionan en elementos HTML también sirven para elementos SVG, con unas cuantas adiciones específicas de SVG.

Desvanecimiento de entrada básico

<svg viewBox="0 0 100 100">
  <style>
    .fade-in { animation: fade 2s ease-in-out infinite alternate; }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  </style>
  <circle class="fade-in" cx="50" cy="50" r="40" fill="#f97316"/>
</svg>

Rotación y escalado

<style>
  .spin { animation: spin 3s linear infinite; transform-origin: 50px 50px; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>

Qué se puede animar en SVG con CSS: opacidad, transform (rotate/scale/translate), color de relleno, color de trazo, ancho de trazo, stroke-dashoffset (para el efecto de "dibujo en tiempo real").

Qué no se puede animar con CSS: datos de ruta (atributo d), atributo points en polígonos, transformaciones de forma complejas.

Soporte en navegadores: Excelente (97%+). Es el método más fiable de todos.

Método 2: SMIL (Animación nativa de SVG)

SMIL (Lenguaje de Integración Multimedia Sincronizada, por sus siglas en inglés) es el sistema de animación integrado de forma nativa en SVG. Puede animar atributos a los que CSS no tiene acceso, sobre todo los datos de ruta para las transformaciones de forma.

Transformar un círculo en un rectángulo

<svg viewBox="0 0 200 100">
  <path fill="#f97316">
    <animate attributeName="d"
      values="M50,50 A30,30 0 1,1 110,50 A30,30 0 1,1 50,50;
              M40,20 L160,20 L160,80 L40,80 Z;
              M50,50 A30,30 0 1,1 110,50 A30,30 0 1,1 50,50"
      dur="3s" repeatCount="indefinite"/>
  </path>
</svg>

Dibujar una línea de forma progresiva

<line x1="10" y1="50" x2="190" y2="50" stroke="#f97316" stroke-width="4">
  <animate attributeName="stroke-dashoffset" from="180" to="0" dur="2s" fill="freeze"/>
</line>

Ventajas: Anima datos de ruta, funciona sin JavaScript, sintaxis declarativa. Desventajas: Chrome intentó deprecarlo una vez (revocaron la decisión luego), IE nunca lo soportó, y tiene un rendimiento ligeramente peor que CSS para muchas animaciones simultáneas.

Método 3: JavaScript (GSAP / Anime.js)

Para animaciones complejas, interactivas o basadas en datos, las librerías de JavaScript te dan la máxima potencia y control.

Ejemplo con GSAP (Transformación de forma + desvanecimiento)

gsap.to(".my-circle", {
  duration: 2,
  attr: { r: 80, fill: "#f59e0b" },
  repeat: -1,
  yoyo: true,
  ease: "power2.inOut"
});

Ejemplo con Anime.js (Dibujo escalonado)

anime({
  targets: ".line-segment",
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 2000,
  delay: anime.stagger(200),
  easing: "easeInOutSine"
});

Cuándo usar JS: Animaciones dinámicas basadas en entradas del usuario, líneas de tiempo complejas con muchos elementos escalonados, movimiento basado en física, integración con datos (transiciones de gráficos).

Comparativa de métodos

Consejos de rendimiento

• Usa will-change: transform en los elementos animados para promoverlos a una capa de GPU

Convertir SVG animados a vídeo o GIF

Si creaste un SVG animado y necesitas compartirlo en plataformas que no admiten este formato (redes sociales, correos electrónicos), tendrás que convertirlo. Usa una grabadora de pantalla o una herramienta como FFmpeg para capturar la animación en formato MP4 o GIF. Si necesitas capturas estáticas en un punto específico de la animación, convierte el SVG a PNG con svg2png.org.

Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años creando interfaces y sistemas de diseño. Construí SVG2PNG después de cansarme de tener los activos de clientes en servidores aleatorios. Más sobre mí →