---
title: "Comment créer une animation SVG sur edtake ?"
url: "https://help.edtake.ai/fr/article/comment-creer-une-animation-svg-sur-edtake"
language: "fr"
last_updated: "2026-05-25T08:55:03.336Z"
---

# 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

| 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](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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
-   **MDN —** **`<animateTransform>`** : [https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform)
-   **CSS Tricks — Animating SVG** : [https://css-tricks.com/guide-svg-animations-smil/](https://css-tricks.com/guide-svg-animations-smil/)
-   **SVGator — exemples** : [https://www.svgator.com/blog/](https://www.svgator.com/blog/)