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 fillstrokeopacitystroke-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

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: onloadonclickonmouseoverURL externas: url(https://…)xlink:href="https://..."
• , imágenes remotas@import en hojas de estilobehavior: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

⚠️ 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 @keyframesanimation: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 CSSMDN — <animate>
• (SMIL)MDN — <animateTransform>CSS Tricks — Animando SVGSVGator — ejemplos