Free · Private · No sign-up

SVG SMIL Animation Inspector & Timeline Controls

Inspect SVG animate, animateTransform, animateMotion, and set elements with their targets, timing, values, and interpolation settings. Pause, resume, and replay native SMIL in a sandbox.

1 Animated SVG

Native XML inspection

Drop an SVG or browseSMIL is inspected locally SVG markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="640" height="360">
  <rect width="320" height="180" rx="20" fill="#17231c"/>
  <circle id="pulse" cx="82" cy="90" r="24" fill="#b9ef7d">
    <animate attributeName="r" values="20;34;20" keyTimes="0;0.5;1" dur="2s" repeatCount="indefinite"/>
  </circle>
  <g id="spinner" transform="rotate(0 220 90)">
    <path d="M220 52v76M182 90h76" stroke="#e67d4a" stroke-width="12" stroke-linecap="round"/>
    <animateTransform attributeName="transform" type="rotate" from="0 220 90" to="360 220 90" dur="4s" repeatCount="indefinite"/>
  </g>
  <circle r="7" fill="#ffffff">
    <animateMotion path="M40 145 C110 115 210 175 280 140" dur="3s" repeatCount="indefinite"/>
  </circle>
  <set attributeName="opacity" to="0.85" begin="1s" dur="2s"/>
</svg>

2 SMIL inventory

Actual attributes only

3 Native animation preview

allow-same-origin · no allow-scripts

Your file is processed on this device and never uploaded.

How it works

From input to output,
in a few clicks.

Understand declarative SVG motion without executing embedded JavaScript. The inspector reads actual SMIL attributes from the XML tree, resolves local animation targets, and opens the artwork in an isolated document where native timeline controls remain available.

Load an animated SVGPaste SVG markup or choose a local file. The inspector identifies all four supported SMIL animation element types.
Review targets and timingRead the target element, animated attribute, begin and duration values, interpolation data, and every other timing attribute actually present.
Control the native timelineWatch the sandboxed original, then pause, resume, or replay its SMIL timeline without enabling scripts in the preview document.

Good to know

Frequently asked questions

Which SVG animations are listed?

The inspector lists animate, animateTransform, animateMotion, and set elements in the SVG namespace. CSS transitions, CSS keyframes, and JavaScript-driven animation are outside this SMIL inventory.

How are animation targets identified?

A local href or xlink:href fragment is resolved to its element ID. Without href, the animation’s parent element is its target. External or unresolved references are labeled instead of being guessed.

Is it safe to preview untrusted SVG here?

The source is loaded as a Blob into an iframe without allow-scripts and is never injected into the host document. Timeline buttons call the browser’s native SVG animation API from the parent page.

Why are the timeline buttons disabled?

They remain disabled when no supported SMIL elements exist, when the XML is invalid, or before the preview has loaded. A clear message also appears for SVG artwork without SMIL animation.