---
title: "Cómo crear una animación SVG en edtake ?"
url: "https://help.edtake.ai/es/article/new-article-a720ba2b-5040-4ccc-86cf-dc9f28f1b2fa"
language: "es"
last_updated: "2026-05-25T08:55:24.819Z"
---

# Cómo crear una animación SVG en edtake ?

El **bloque SVG Animation** muestra un archivo SVG proporcionado por el usuario. Para que sea *animado* (y no solo se muestre), el SVG debe contener instrucciones de animación. Esta guía explica los dos métodos compatibles, con ejemplos para copiar y pegar.

* * *

## TL;DR — El criterio

Un SVG **solo** se anima si contiene:

-   O una etiqueta `<style>` con `@keyframes` + una propiedad `animation:` en los elementos
-   O una etiqueta SMIL: `<animate>`<animateTransform>`<animateMotion>`, o `<set>`

Si el SVG no contiene nada de esto, se mostrará como una imagen estática; esto es normal, no es un mal funcionamiento.

> ⚠️ Los atributos `style="..."` en línea que contienen solo `fill`stroke`opacity`stroke-dasharray`, etc.,` no crean ninguna animación`. Solo definen la apariencia.`

* * *

## Método 1 — Animación CSS (`@keyframes`

Este es el método recomendado para la mayoría de los casos (rotación, fundido de entrada, dibujo progresivo, pulsación...).

### Ejemplo: un círculo pulsante

```
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes pulse {
      0%, 100% { r: 40; opacity: 1; }
      50%      { r: 60; opacity: 0.5; }
    }
    .pulse { animation: pulse 2s ease-in-out infinite; }
  </style>
  <circle class="pulse" cx="100" cy="100" fill="#7F77DD" />
</svg>
```

### Ejemplo: una línea que se dibuja a sí misma

```
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes draw {
      from { stroke-dashoffset: 200; }
      to   { stroke-dashoffset: 0; }
    }
    .line {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: draw 1.5s ease-out forwards;
    }
  </style>
  <line class="line" x1="20" y1="100" x2="180" y2="100"
        stroke="#378ADD" stroke-width="3" />
</svg>
```

### Desplazar múltiples animaciones (efecto secuencial)

Use `animation-delay` para hacer que los elementos aparezcan uno tras otro:

```
<style>
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
  .a { opacity: 0; animation: appear 0.5s forwards; }
  .a:nth-child(1) { animation-delay: 0.0s; }
  .a:nth-child(2) { animation-delay: 0.3s; }
  .a:nth-child(3) { animation-delay: 0.6s; }
</style>
```

* * *

## Método 2 — Animación SMIL (`<animate>`

Más detallado, pero muy potente para animar un atributo específico en un elemento específico.

### Ejemplo: una barra que se llena

```
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="20" height="20" fill="#1D9E75">
    <animate attributeName="width" from="0" to="180"
             dur="2s" fill="freeze" />
  </rect>
</svg>
```

### Ejemplo: un elemento que gira

```
<rect x="80" y="80" width="40" height="40" fill="#D85A30">
  <animateTransform attributeName="transform" type="rotate"
                    from="0 100 100" to="360 100 100"
                    dur="3s" repeatCount="indefinite" />
</rect>
```

### Atributos clave de SMIL

| Atributo | Función |
| --- | --- |
| `attributeName` | Qué animar (`opacity`width`cx`transform`from`to`Valores inicial y final`dur |
| `Duración (ej.` 2s`500ms` | repeatCount |
| `indefinite` | o un número`fill="freeze"`Mantiene el estado final al terminar`begin`Desplazamiento inicial (ej. |
| `1s` |  |
|  |  |
|  |  |

* * *

## Lo que está prohibido (eliminado automáticamente)

SVG se sanea antes de mostrarse por razones de seguridad. Se elimina lo siguiente:

-   `<script>` y cualquier ejecución de JavaScript
-   `<foreignObject>` (HTML incrustado)
-   Atributos de evento: `onload`onclick`onmouseover`URL externas: `url(https://…)`xlink:href="https://..."
-   , imágenes remotas`@import` en hojas de estilo`behavior:`expression()
-   `(vulnerabilidades antiguas de IE)`

**Consecuencia práctica:** las animaciones deben ser **autocontenidas**. Sin Google Fonts, sin imágenes externas, sin scripts. Todo debe caber dentro del archivo SVG.

* * *

## Herramientas recomendadas para generar un SVG animado

| Herramienta | Para quién | Notas |
| --- | --- | --- |
| **SVGator**svgator.com[Diseñadores, sin código](https://www.svgator.com/)Generar SMIL o CSS, para exportar como SVG (no HTML/JS) | Preguntar a una IA | (Mistral, Claude…) |
| **Todos**Preguntar: | "genera un SVG autocontenido con una animación CSS que \[descripción\]" |  |

> ⚠️ Con SVGator: elige el formato de exportación **"SVG" (con animación CSS o SMIL incrustada)**, no "HTML" o "JavaScript" — JS será eliminado.

* * *

## Lista de verificación antes de pegar un SVG en el bloque

-   El archivo comienza con `<svg ...>` y termina con `</svg>`
-   Contiene **al menos uno**<animate\*> `o un bloque` <style> `con` @keyframes`animation:`Sin referencia a imágenes externas, fuentes o recursos (`http://`
-   https://`Sin` <script> `o atributos` onclick=...
-   Probado en un navegador (abre el `.svg` directamente → la animación debería reproducirse)

* * *

## Recursos

-   **MDN — Animación SVG con CSS**MDN — [<animate>](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_CSS3)
-   **(SMIL)****`MDN —`** **<animateTransform>**CSS Tricks — Animando SVG[SVGator — ejemplos](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
-   
-   
-