> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://kb.edtake.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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

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

```xml
<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 :

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

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

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

| Attribut | Rôle |
| --- | --- |
| `attributeName` | Quoi animer (`opacity`, `width`, `cx`, `transform`…) |
| `from` / `to` | Valeurs de départ et d'arrivée |
| `dur` | Durée (ex. `2s`, `500ms`) |
| `repeatCount` | `indefinite` ou un nombre |
| `fill="freeze"` | Garde l'état final à la fin |
| `begin` | Décalage de démarrage (ex. `1s`) |

---

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

| Outil | Pour qui | Notes |
| --- | --- | --- |
| **SVGator** ([svgator.com](https://www.svgator.com/)) | Designers, sans code | Générer du SMIL ou CSS, à exporter en SVG (pas en HTML/JS) |
| **Demander à une IA** (Mistral, Claude…) | Tout le monde | Demander : ***« génère un SVG autonome avec une animation CSS qui [description] »*** |

> ⚠️ 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/