---
title: "How to create an SVG animation on edtake?"
url: "https://help.edtake.ai/en/article/new-article-9a8e94db-70cb-4178-9e2f-ce20adeff159"
language: "en"
last_updated: "2026-05-25T08:55:30.197Z"
---

# How to create an SVG animation on edtake?

The **SVG Animation** block displays a user-provided SVG file. For it to be *animated* (and not just displayed), the SVG must contain animation instructions. This guide explains the two supported methods, with copy-paste examples.

* * *

## TL;DR — The criterion

An SVG is **only** animated if it contains:

-   Either a `<style>` tag with `@keyframes` + an `animation:` property on elements
-   Or a SMIL tag: `<animate>`<animateTransform>`<animateMotion>`, or `<set>`

If the SVG contains none of this, it will display as a static image — this is normal, it is not a malfunction.

> ⚠️ Inline `style="..."` attributes containing only `fill`stroke`opacity`stroke-dasharray`, etc.,` do not create any animation`. They only define appearance.`

* * *

## Method 1 — CSS Animation (`@keyframes`

This is the recommended method for most cases (rotation, fade-in, progressive drawing, pulsing...).

### Example: a pulsing circle

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

### Example: a line that draws itself

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

### Offset multiple animations (sequential effect)

Use `animation-delay` to make elements appear one after another:

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

* * *

## Method 2 — SMIL Animation (`<animate>`

More verbose, but very powerful for animating a specific attribute on a specific element.

### Example: a bar that fills up

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

### Example: an element that rotates

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

### Key SMIL Attributes

| Attribute | Role |
| --- | --- |
| `attributeName` | What to animate (`opacity`width`cx`transform`from`to`Start and end values`dur |
| `Duration (e.g.` 2s`500ms` | repeatCount |
| `indefinite` | or a number`fill="freeze"`Keeps the final state at the end`begin`Start offset (e.g. |
| `1s` |  |
|  |  |
|  |  |

* * *

## What is forbidden (automatically removed)

SVG is sanitized before display for security reasons. The following are removed:

-   `<script>` and any JavaScript execution
-   `<foreignObject>` (embedded HTML)
-   Event attributes: `onload`onclick`onmouseover`External URLs: `url(https://…)`xlink:href="https://..."
-   , remote images`@import` in stylesheets`behavior:`expression()
-   `(old IE vulnerabilities)`

**Practical consequence:** animations must be **self-contained**. No Google Fonts, no external images, no scripts. Everything must fit within the SVG file.

* * *

## Recommended tools for generating an animated SVG

| Tool | For whom | Notes |
| --- | --- | --- |
| **SVGator**svgator.com[Designers, no code](https://www.svgator.com/)Generate SMIL or CSS, to export as SVG (not HTML/JS) | Ask an AI | (Mistral, Claude…) |
| **Everyone**Ask: | "generate a self-contained SVG with a CSS animation that \[description\]" |  |

> ⚠️ With SVGator: choose the export format **"SVG" (with embedded CSS or SMIL animation)**, not "HTML" or "JavaScript" — JS will be removed.

* * *

## Checklist before pasting an SVG into the block

-   The file starts with `<svg ...>` and ends with `</svg>`
-   It contains **at least one**<animate\*> `or a block` <style> `with` @keyframes`animation:`No reference to external images, fonts, or resources (`http://`
-   https://`No` <script> `or attributes` onclick=...
-   Tested in a browser (open the `.svg` directly → the animation should play)

* * *

## Resources

-   **MDN — SVG animation with CSS**MDN — [<animate>](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_CSS3)
-   **(SMIL)****`MDN —`** **<animateTransform>**CSS Tricks — Animating SVG[SVGator — examples](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
-   
-   
-