How to Check SVG Animations: A Practical Guide (with Free Tool)

To check an SVG's animations, open it in a browser, inspect the source for <animate>, <animateTransform>, or <animateMotion> elements (SMIL), look inside <style> blocks for @keyframes rules (CSS animation), and check for <script> elements (JavaScript animation). The SVG Genie animation checker does this automatically — paste your SVG and see every animation listed with its target element, duration, and repeat count.

SVG animations come from three completely different mechanisms, each with different debugging implications. This guide explains how to identify which type your SVG uses, why animations sometimes do not play, and how to evaluate animation performance.

The Three Types of SVG Animation

Before checking an animation, you need to know what to look for. SVG supports three independent animation methods:

SMIL Animation (Inline Elements)

SMIL (Synchronized Multimedia Integration Language) embeds animation directly inside the SVG markup as child elements. The most common SMIL elements are:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="purple">
    <animate
      attributeName="r"
      values="40;60;40"
      dur="2s"
      repeatCount="indefinite" />
  </circle>
</svg>

This SVG pulses the circle from radius 40 to 60 to 40, every 2 seconds, forever. The animation is part of the SVG file — no external CSS or JavaScript needed.

SMIL elements include <animate>, <animateTransform> (for rotation, scale, translate), <animateMotion> (for path-following animation), <animateColor> (deprecated, use <animate> with attributeName="fill" instead), and <set> (for discrete value changes).

CSS Animation

CSS animation works on SVG attributes just like it works on HTML elements. The CSS can live in an external stylesheet, an HTML <style> block, or inside the SVG itself:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes pulse {
      0%, 100% { r: 40; }
      50% { r: 60; }
    }
    circle { animation: pulse 2s infinite; }
  </style>
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>

CSS animations target SVG attributes (r, cx, fill, transform, etc.) the same way they target HTML properties.

JavaScript Animation

JavaScript can modify any SVG attribute over time using requestAnimationFrame, libraries like GSAP and Framer Motion, or direct setInterval calls:

const circle = document.querySelector("circle");
let t = 0;
function animate() {
  t += 0.016;
  circle.setAttribute("r", 50 + Math.sin(t) * 10);
  requestAnimationFrame(animate);
}
animate();

JavaScript animations require either inline SVG embedded in HTML or SVG loaded via <object> — they do not run inside SVGs loaded via <img>.

How to Detect Each Animation Type

Method 1: Visual Inspection

Open the SVG file in any text editor (VS Code, Sublime, even Notepad). Look for these signals:

Signal	Animation type
<animate>, <animateTransform>, <animateMotion>	SMIL
<style> block containing @keyframes	CSS
animation: or transition: in style content	CSS
<script> element	JavaScript
References to external .css or .js files	CSS or JS (external)

Most SVGs use exactly one mechanism. Mixed SVGs (SMIL + CSS, for example) exist but are unusual.

Method 2: Browser DevTools

Open the SVG in any browser. Right-click → Inspect (or F12). In the Elements panel, expand the SVG to see all child elements. SMIL animations appear as child elements of the shapes they animate. CSS animations show up as computed styles on the elements.

For animations that should be playing but are not, the Animations tab in Chrome DevTools (or Animation Inspector in Firefox) lists every active CSS/JS animation with its current state. SMIL animations do not show up in these panels — they exist outside the standard web animation system.

Method 3: Online Animation Checker

The SVG Genie SVG Animation Checker parses the SVG and produces a complete report:

• Count of SMIL elements with their attributes, durations, and targets
• List of CSS @keyframes rules defined inside the SVG
• Count of <script> elements
• Performance score with notes
• Accessibility check for prefers-reduced-motion handling

Paste your SVG, get the report in under a second. Useful when you have many SVGs to audit or when the source is dense and hard to scan manually.

Why SVG Animations Sometimes Do Not Play

Six common causes, in rough order of frequency:

1. The SVG Is Loaded Via <img>

This is the most common cause. When an SVG is loaded via <img src="file.svg">, browsers run it in a restricted security context:

• Internal <script> elements do not execute
• External CSS does not apply
• Internal @font-face rules may not load
• In some browsers, certain SMIL features are restricted

CSS animations defined inside the SVG and SMIL animations both work via <img>. JavaScript animations and externally-styled animations do not.

Fix: load the SVG inline (paste markup directly into HTML) or use <object data="file.svg" type="image/svg+xml">. Both methods allow scripts and external CSS to apply.

2. External Resources Failed to Load

If the SVG references an external font, CSS file, or image, and that resource fails to load (network error, CORS rejection, 404), the animation may render partially or not at all.

Fix: check the browser's Network tab for failed requests originating from the SVG. Inline any external resources directly into the SVG markup.

3. The begin Attribute Has Not Fired

SMIL animations support a begin attribute that delays start or waits for an event:

<animate attributeName="r" values="40;60" dur="1s" begin="click" />

This animation only starts when the parent element is clicked. If you expected immediate playback, the animation will appear broken.

Fix: change begin="click" to begin="0s" for immediate start, or trigger the event manually.

4. prefers-reduced-motion Is Enabled

If the user has enabled "Reduce Motion" in their OS accessibility settings, browsers honor the prefers-reduced-motion CSS media query. SVGs with CSS animations wrapped in this query will not animate.

@media (prefers-reduced-motion: no-preference) {
  circle { animation: pulse 2s infinite; }
}

This is intentional behavior — respect for accessibility preferences. The animation works for users who have not opted out.

Fix: check the OS setting. On macOS: System Settings → Accessibility → Display → Reduce Motion. On Windows: Settings → Accessibility → Visual Effects → Animation Effects. On iOS: Settings → Accessibility → Motion → Reduce Motion.

5. SMIL Is Disabled in Older Browsers

Chrome announced SMIL deprecation in 2015 and then reversed the decision in 2016. SMIL is currently supported in all major modern browsers, but Internet Explorer never supported it.

Fix: for sites still supporting IE (rare in 2026), use CSS or JS animation instead of SMIL.

6. The SVG Has No Animation

Sometimes the SVG simply does not contain any animations. The animation might be in the surrounding HTML/CSS rather than the SVG itself, or the file might have been exported without animation by mistake.

Fix: use the animation checker to confirm whether the SVG contains animations at all. If it says zero, the file is static.

Performance Considerations

Not all SVG animations perform equally. Three rules of thumb:

CSS Animations Are Usually Fastest

Modern browsers GPU-accelerate CSS animations of transform and opacity. Animations of these two properties typically run at 60fps even on low-end mobile.

CSS animations of other properties (like SVG attributes via attribute-targeting @keyframes) are slightly slower because they require layout recalculation, but they remain efficient.

Many SMIL Elements Slow Down Rendering

SMIL animations are processed by the SVG renderer rather than the GPU compositor. Twenty simultaneous SMIL animations on a single SVG can drop frame rate even on desktop. The animation checker flags this as a performance warning when it detects 20+ SMIL elements.

For SVGs that need many simultaneous animated elements, consolidate to CSS animations or use a single JavaScript timeline (like GSAP) that batches updates.

Avoid Animating Properties That Cause Reflow

Animating width, height, or path data (d attribute) forces the layout engine to recalculate geometry on every frame. This is expensive. Animating transform and opacity is dramatically cheaper.

Bad: animation: grow 1s where grow keyframes change r from 40 to 80. Better: animation: grow 1s where grow keyframes use transform: scale(1) to transform: scale(2).

The visual result is identical but the second version is GPU-accelerated.

Accessibility: The prefers-reduced-motion Pattern

Roughly 35% of users enable some form of reduced motion preference (Apple's own data). For meaningful animations (loading spinners, transitions), this matters significantly.

The standard pattern is to gate non-essential animations behind the media query:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated-icon {
  /* No animation by default */
}

@media (prefers-reduced-motion: no-preference) {
  .animated-icon {
    animation: pulse 2s infinite;
  }
}

This pattern ships zero animation by default and adds it only for users who have not opted out. The animation checker flags SVGs that animate without this guard as an accessibility concern.

For SMIL animations, accessibility is harder because SMIL does not natively respect prefers-reduced-motion. Workarounds include using JavaScript to remove animations conditionally, or providing a static fallback that the SVG switches to programmatically.

Reading an Animation Report

When you run the animation checker on an SVG, the report shows:

Animation Counts

How many SMIL elements, CSS animation rules, and scripts are present. Useful for understanding how the animation was built.

Per-Element Detail

For each SMIL animation, the report lists:

• Type: animate, animateTransform, animateMotion, or set
• Target: which element it animates (parent tag)
• Attribute: which attribute changes (fill, r, transform, etc.)
• Duration: how long the animation lasts
• Repeats: 1, 5, indefinite, etc.

This is enough information to understand any SMIL animation without reading the source.

Performance Score

A 0–100 score based on:

• Number of SMIL elements (each animation costs)
• Total element count in the SVG (more elements = more work per frame)
• Presence of scripts (compatibility risk with <img> loading)
• Accessibility patterns

A score above 80 typically renders smoothly on modern devices. Below 60 suggests optimization is needed for mobile or low-end hardware.

Accessibility Check

Whether the SVG has @media (prefers-reduced-motion: ...) rules. If your SVG includes CSS animations without this guard, the checker flags it as an accessibility issue.

Common Animation Patterns

Pulsing Icon

<svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="8" fill="#8600ef">
    <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

Rotating Loader

<svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="none" stroke="#8600ef"
    stroke-dasharray="20" stroke-dashoffset="0">
    <animateTransform attributeName="transform" type="rotate"
      from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

Path-Drawing Animation

<svg viewBox="0 0 100 100">
  <path d="M10 50 L50 10 L90 50 L50 90 Z" fill="none" stroke="#8600ef"
    stroke-width="2" stroke-dasharray="160" stroke-dashoffset="160">
    <animate attributeName="stroke-dashoffset" from="160" to="0" dur="2s" fill="freeze" />
  </path>
</svg>

The fill="freeze" attribute makes the animation hold its final state instead of resetting.

Color Cycle

<svg viewBox="0 0 24 24">
  <rect width="24" height="24">
    <animate attributeName="fill"
      values="#ff0066;#ff9933;#33ff66;#3366ff;#cc33ff;#ff0066"
      dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

The values attribute can list any number of color stops. The animation interpolates between them in equal time slices.

Frequently Asked Questions

How can I tell if an SVG file has animations?

Open the SVG in a text editor. Search for <animate, <set, @keyframes, or <script>. Any of these indicates the SVG contains some form of animation. For an instant report on all animation types, paste the SVG into the SVG Genie animation checker.

Why does my SVG animation work in CodePen but not on my website?

Most likely you are loading the SVG via <img src="file.svg"> on your site but using inline SVG in CodePen. Internal scripts and externally-defined CSS do not apply when SVG is loaded via <img>. Switch to inline SVG, <object>, or move CSS animations into a <style> block inside the SVG itself.

Is SMIL deprecated in 2026?

No. Chrome announced SMIL deprecation in 2015, then reversed the announcement in 2016. SMIL remains supported in all modern browsers (Chrome, Firefox, Safari, Edge). However, CSS animation is generally preferred for new work because it performs better and integrates with the broader CSS animation system.

How do I pause an SVG animation?

For SMIL: use the JavaScript API — svgElement.pauseAnimations() and svgElement.unpauseAnimations(). For CSS animations: toggle a class that sets animation-play-state: paused. The animation checker's preview pane uses the SMIL pause API to let you stop and resume animations on demand.

Can I animate an SVG with CSS without inlining it?

Partially. You can use CSS animations defined inside a <style> block within the SVG file — these work when the SVG is loaded via <img>, <object>, or inline. You cannot use external CSS from a separate stylesheet to animate an SVG loaded as <img> — the external CSS does not penetrate the image's document.

What is the best way to animate SVGs in 2026?

For most use cases, CSS animations inside a <style> block embedded in the SVG. This works in every context (img, object, inline), respects prefers-reduced-motion when written correctly, and performs well. For interactive animations driven by user state (clicks, scrolls), use JavaScript with a library like GSAP or Framer Motion on inline SVG.

How do I check if an SVG animation respects accessibility?

Search for prefers-reduced-motion in the SVG. If the CSS animations are wrapped in @media (prefers-reduced-motion: no-preference) { ... }, the SVG respects user motion preferences. SMIL animations cannot natively respect this preference — you would need JavaScript to remove or modify SMIL elements based on the media query. The animation checker reports this automatically.

Why does my SVG animation flicker?

Three common causes: (1) animating layout-affecting properties like width or d instead of transform, causing reflow on every frame; (2) too many simultaneous SMIL animations exceeding the browser's animation budget; (3) z-index conflicts when multiple animations target overlapping elements. Switch to transform-based animation and consolidate timelines to fix most cases.

Can I convert SMIL animations to CSS?

Often yes, but not always. Basic SMIL animations (animate, animateTransform) usually translate to CSS keyframes cleanly. Complex SMIL features (animateMotion along arbitrary paths, sync-based timing chains) have no direct CSS equivalent and need JavaScript instead.

How long should an SVG animation be?

For UI feedback (button hover, icon state change): 150–300ms. For attention-grabbing animations (pulsing notification): 1–2 seconds. For decorative animations (looping illustrations): 3–8 seconds. Animations longer than 10 seconds tend to feel slow or repetitive.