Como animar un SVG con CSS

Con ejemplos

Un SVG insertado inline en el HTML se puede animar con CSS igual que cualquier elemento. Aqui las tecnicas mas utiles.

Requisito: SVG inline

Para que el CSS llegue a las formas internas, el SVG debe estar inline en el HTML (no como img). Dale clases o IDs a las formas que quieras animar.

1. Rotacion continua

.spin { transform-box: fill-box; transform-origin: center; animation: spin 2s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

transform-box: fill-box hace que rote sobre su propio centro.

2. Trazo que se dibuja

.linea { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 2s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } }

Efecto de "dibujado a mano". Ajusta el valor al largo real del trazo.

3. Cambio de color al pasar el mouse

.icono path { fill: #6c8cff; transition: fill .2s; } .icono:hover path { fill: #ff6c9c; }

4. Pulso de escala

@keyframes pulso { 50% { transform: scale(1.15); } } .punto { transform-box: fill-box; transform-origin: center; animation: pulso 1s ease-in-out infinite; }

Consejos

Anima transform y opacity (son las mas fluidas).
Usa transform-box: fill-box para que el origen sea la propia forma.
Respeta prefers-reduced-motion para accesibilidad.

Prepara tu SVG

En svgdesk creas la forma, le pones el codigo limpio y copias el <svg> para pegarlo inline y animarlo.

Abrir el editor