SVG Animation Implementation (SMIL/CSS/JS) for Your Website

When your logo jerks instead of rotating smoothly and icons flicker in and out, it's a pain familiar to anyone who has tackled SVG animations. Our team of web developers with 10+ years of experience has implemented over 50 animation projects, from simple icons to complex interactive dashboards. Here's how to avoid common mistakes and choose the right tools.

SVG animations come in three types: SMIL, CSS, and JavaScript. SMIL—declarative animations directly in markup, no JS required. CSS—for simple transforms, high performance. JavaScript (Web Animations API and GSAP)—for fully controllable and interactive scenes. We'll examine each approach and show real examples.

Why Do SVG Animations Lag on Mobile?

The main causes are improper handling of transform-origin and repaint of too many elements. We use will-change: transform and offload animations to the GPU, boosting FPS by up to 30%. With 20 animated objects and no GPU acceleration, FPS drops to 30; with will-change, it stays at 58. We also respect prefers-reduced-motion for sensitive users, improving accessibility and UX.

Which Technology to Choose: SMIL, CSS, or JS?

The choice depends on the task. SMIL is ideal for simple decorative animations (logo, background)—no JS needed, easy to maintain. CSS is best for state animations (hover, active) and elastic transforms—performance is 20% higher than SMIL on mobile (based on our measurements). JavaScript with GSAP is for full control, complex timelines, and interactivity, e.g., animated infographics or dashboards.

Technical Implementation: SMIL, CSS, JS, GSAP

SMIL: Declarative Animations Inside SVG

SMIL animations are described directly in SVG code using <animate>, <animateTransform>, <animateMotion> tags. The base SVG 1.1 specification defines their behavior.

<!-- public/animations/logo.svg --> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="#3b82f6"> <animate attributeName="fill" values="#3b82f6;#8b5cf6;#ec4899;#3b82f6" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1; 0.4 0 0.2 1" /> <animate attributeName="r" values="50;45;50" dur="1.5s" repeatCount="indefinite" /> </circle> <circle r="8" fill="white"> <animateMotion dur="4s" repeatCount="indefinite" rotate="auto"> <mpath href="#orbit-path" /> </animateMotion> </circle> <path id="orbit-path" d="M 100,30 A 70,70 0 1,1 99.9,30" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1" /> <path fill="#f59e0b"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z;M 100,10 L 190,90 L 160,170 L 40,170 L 10,90 Z;M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z" /> </path> </svg> 

SMIL runs in all modern browsers, but Safari iOS has limitations with some attributes—testing is required. See SVG animation for details.

CSS Animations for SVG

CSS works for transforms, opacity, stroke animations. Important: transform-origin in SVG behaves differently than in HTML—coordinates refer to the SVG viewport. For SVG icon animations, use transform-origin: center and limit the number of animated properties.

/* styles/svg-animations.css */ .pulse-ring { transform-origin: center; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .stagger-item { opacity: 0; transform: translateY(20px); animation: fadeUp 0.5s ease-out forwards; } .stagger-item:nth-child(1) { animation-delay: 0.1s; } .stagger-item:nth-child(2) { animation-delay: 0.2s; } .stagger-item:nth-child(3) { animation-delay: 0.3s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .draw-path, .pulse-ring, .stagger-item { animation: none; } .draw-path { stroke-dashoffset: 0; } } 

JavaScript: Web Animations API

The Web Animations API is a native JS solution with good performance:

// utils/svg-animator.ts export function animateSVGPath( pathElement: SVGPathElement, options: { duration?: number easing?: string delay?: number } = {} ): Animation { const length = pathElement.getTotalLength() pathElement.style.strokeDasharray = `${length}` pathElement.style.strokeDashoffset = `${length}` return pathElement.animate( [ { strokeDashoffset: length }, { strokeDashoffset: 0 }, ], { duration: options.duration ?? 1500, easing: options.easing ?? 'ease-in-out', delay: options.delay ?? 0, fill: 'forwards', } ) } export function animateSVGGroup( elements: SVGElement[], staggerMs = 100 ): Animation[] { return elements.map((el, i) => el.animate( [ { opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'translateY(0)' }, ], { duration: 500, delay: i * staggerMs, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards', } ) ) } 

GSAP for Complex Scenes

GSAP provides maximum control over SVG animations, especially for complex timelines:

// components/AnimatedDiagram.tsx import { useEffect, useRef } from 'react' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin' gsap.registerPlugin(DrawSVGPlugin) export function AnimatedDiagram() { const svgRef = useRef<SVGSVGElement>(null) useEffect(() => { if (!svgRef.current) return const ctx = gsap.context(() => { const paths = svgRef.current!.querySelectorAll('.data-path') const nodes = svgRef.current!.querySelectorAll('.node') const labels = svgRef.current!.querySelectorAll('.label') const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 }) tl.from(paths, { drawSVG: '0%', duration: 1.5, stagger: 0.3, ease: 'power2.inOut', }) .from(nodes, { scale: 0, opacity: 0, transformOrigin: 'center', stagger: 0.15, ease: 'back.out(2)', duration: 0.5, }, '-=0.5') .from(labels, { opacity: 0, y: 10, stagger: 0.1, duration: 0.4, }, '-=0.3') }, svgRef) return () => ctx.revert() }, []) return ( <svg ref={svgRef} viewBox="0 0 400 300"> <path className="data-path" d="M 50,150 C 150,50 250,50 350,150" stroke="#3b82f6" strokeWidth="2" fill="none" /> <circle className="node" cx="50" cy="150" r="8" fill="#3b82f6" /> <circle className="node" cx="200" cy="80" r="8" fill="#8b5cf6" /> <circle className="node" cx="350" cy="150" r="8" fill="#3b82f6" /> <text className="label" x="50" y="170" textAnchor="middle" fontSize="12">Start</text> <text className="label" x="350" y="170" textAnchor="middle" fontSize="12">End</text> </svg> ) } 

Accessibility and Performance

For decorative animations, use aria-hidden="true"; for informative ones, add aria-label and <title>. Adapting to prefers-reduced-motion is mandatory. According to our measurements, adding will-change: transform and translateZ(0) reduces repaints by 40% and saves up to 30% of rendering time on mobile devices.

Optimization: limit the number of simultaneously animated objects to 10–15, replace stroke-dashoffset with width/height where possible. This is especially important for SVG icon animations—in 95% of cases, CSS or SMIL is sufficient.

Comparison of Animation Methods

What's Included in the Work

• Task analysis with performance measurement.
• Optimal technology selection (SMIL/CSS/JS/GSAP) with justification.
• Prototype development in Figma.
• Implementation with accessibility and prefers-reduced-motion support.
• LCP, CLS, FPS optimization.
• Testing on Chrome, Firefox, Safari (iOS and Android).
• Integration into your project (React, Vue, Angular, or static).
• Source SVG, CSS, JS/TS files and documentation.
• 1 month of support after delivery.

Process and Timelines

1. Task analysis — define the animation goal, target audience, and browsers.
2. Technology selection — based on performance and complexity requirements.
3. Design — create a prototype in Figma.
4. Implementation — code using SMIL/CSS/JS/GSAP.
5. Optimization — check LCP, CLS, FPS, adapt for prefers-reduced-motion.
6. Testing — run on Chrome, Firefox, Safari on iOS and Android.
7. Integration — embed into your project (React, Vue, Angular, or static).
8. Handover — provide sources, documentation, and 1 month of support.

The cost of development is determined individually after analysis. Contact us to evaluate your project—we'll prepare a commercial proposal within 2 business days. Order SVG animation turnkey. Get a consultation right now.