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 fillstrokeopacitystroke-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: onloadonclickonmouseoverExternal URLs: url(https://…)xlink:href="https://..."
, remote images@import in stylesheetsbehavior: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
SVGatorsvgator.comDesigners, no codeGenerate SMIL or CSS, to export as SVG (not HTML/JS)	Ask an AI	(Mistral, Claude…)
EveryoneAsk:	"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 @keyframesanimation: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 CSSMDN — <animate>
(SMIL)MDN — <animateTransform>CSS Tricks — Animating SVGSVGator — examples