HTML Academy · Lesson

Animating SVG with CSS and SMIL

Add motion to SVG elements with CSS transitions and SMIL.

Animating SVG with CSS and SMIL is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

CSS Transitions on SVG

SVG presentation attributes (fill, stroke, opacity, transform) can be animated with CSS transitions. Add a class and define the transition: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS transitions work identically on SVG elements.

CSS Keyframe Animations on SVG

Apply @keyframes to SVG elements: animate stroke-dashoffset for path drawing effects, opacity for fade-in, transform for movement and rotation. The same animation syntax used for HTML elements applies to SVG elements without modification.

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

Path Drawing Effect

The stroke-dasharray and stroke-dashoffset technique simulates drawing a path: set dasharray equal to path length, set dashoffset to path length (invisible), then animate dashoffset to 0. The stroke appears to draw itself from start to end.

Getting Path Length

path.getTotalLength() returns the path's length in SVG user units. Use this value for both stroke-dasharray and the starting stroke-dashoffset. This ensures the animation works correctly regardless of path complexity or length.

CSS transform on SVG

Modern browsers support CSS transform on SVG elements. transform-origin defaults to the SVG's top-left corner in SVG elements — not the element center like HTML. Specify transform-box: fill-box to make transform-origin relative to the element's bounding box.

.spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 1s linear infinite;
}

SMIL Animations

SMIL (Synchronized Multimedia Integration Language) is SVG's built-in animation system. The animate element changes attribute values over time. SMIL does not require JavaScript or CSS — animations are fully declarative inside the SVG markup.

<circle r="20">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>

animateTransform

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> rotates an element around a specified center point using SMIL syntax.

animateMotion

<animateMotion> moves an element along an SVG path. Reference a path with mpath or inline path data. The element follows the path curve automatically — useful for complex motion paths without manual coordinate calculation.

CSS vs SMIL Trade-offs

CSS animations: supported in all modern browsers, integrated with CSS cascade, easier to control via JavaScript (pause, reverse). SMIL: self-contained in SVG markup, works in static SVG files without CSS access, declarative and expressive for path-following animation.

Morphing SVG Paths

Animate between two path shapes: paths must have the same number of commands and compatible structure. The CSS animation animates the d property (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } for native CSS path morphing.

Accessibility for SVG Animation

Add prefers-reduced-motion media query to disable or simplify SVG animations for users who find motion uncomfortable. Decorative animations should be disabled entirely; meaningful animations (loading states) should be simplified rather than stopped.

Knowledge Check

How does the stroke-dasharray and stroke-dashoffset technique create a path drawing animation?

Summary

SVG animation uses CSS transitions and keyframes for property-based effects, the stroke-dasharray/dashoffset technique for path drawing, SMIL animate/animateTransform/animateMotion for declarative in-SVG animation, and prefers-reduced-motion for accessibility. CSS and SMIL are complementary — choose based on whether the SVG needs CSS cascade integration or standalone file portability.

Frequently asked questions

Is the “Animating SVG with CSS and SMIL” lesson free?

Yes — the full text of “Animating SVG with CSS and SMIL” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Animating SVG with CSS and SMIL”?

Add motion to SVG elements with CSS transitions and SMIL. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Animating SVG with CSS and SMIL” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy