Comment créer une animation SVG sur edtake ?

Le bloc SVG Animation affiche un fichier SVG fourni par l'utilisateur. Pour qu'il soit animé (et pas juste affiché), le SVG doit contenir des instructions d'animation. Ce guide explique les deux méthodes supportées, avec exemples copier-coller.

TL;DR — Le critère

Un SVG est animé uniquement s'il contient :

• Soit une balise <style> avec un @keyframes + une propriété animation: sur des éléments
• Soit une balise SMIL : <animate>, <animateTransform>, <animateMotion>, ou <set>

Si le SVG ne contient rien de tout cela, il s'affichera comme une image statique — c'est normal, ce n'est pas un dysfonctionnement.

⚠️ Les attributs style="..." inline qui ne contiennent que fill, stroke, opacity, stroke-dasharray, etc., ne créent aucune animation. Ils ne font que définir l'apparence.

Méthode 1 — Animation CSS (@keyframes)

C'est la méthode recommandée pour la plupart des cas (rotation, fade-in, tracé progressif, pulsation…).

Exemple : un cercle qui pulse

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

Exemple : un trait qui se dessine

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

Décaler plusieurs animations (effet séquentiel)

Utiliser animation-delay pour faire apparaître les éléments les uns après les autres :

<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éthode 2 — Animation SMIL (<animate>)

Plus verbeuse, mais très puissante pour animer un attribut précis sur un élément précis.

Exemple : une barre qui se remplit

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

Exemple : un élément qui tourne

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

Attributs clés SMIL

Ce qui est interdit (supprimé automatiquement)

Le SVG est nettoyé avant affichage pour des raisons de sécurité. Sont supprimés :

• <script> et toute exécution de JavaScript
• <foreignObject> (HTML embarqué)
• Attributs d'événements : onload, onclick, onmouseover…
• URLs externes : url(https://…), xlink:href="https://...", images distantes
• @import dans les feuilles de style
• behavior:, expression() (vieilles failles IE)

Conséquence pratique : les animations doivent être autonomes. Pas de polices Google Fonts, pas d'images externes, pas de scripts. Tout doit tenir dans le fichier SVG.

Outils recommandés pour générer un SVG animé

⚠️ Avec SVGator : choisir le format d'export « SVG » (avec animation CSS ou SMIL embarquée), pas « HTML » ni « JavaScript » — le JS sera supprimé.

Checklist avant de coller un SVG dans le bloc

• Le fichier commence par <svg ...> et finit par </svg>
• Il contient au moins un <animate*> ou un bloc <style> avec @keyframes + animation:
• Aucune référence à des images, polices ou ressources externes (http://, https://)
• Pas de <script> ni d'attributs onclick=...
• Testé dans un navigateur (ouvrir le .svg directement → l'animation doit se jouer)

Ressources

• MDN — SVG animation avec CSS : https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_CSS3
• MDN — <animate> (SMIL) : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
• MDN — <animateTransform> : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform
• CSS Tricks — Animating SVG : https://css-tricks.com/guide-svg-animations-smil/
• SVGator — exemples : https://www.svgator.com/blog/