HTML Academy · Lesson

Animating SVG with CSS and SMIL

Add motion to SVG elements with CSS transitions and SMIL.

Lesson 4 of 413 steps

Animating SVG with CSS and SMIL is a free HTML Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the HTML Academy learning path, including “Animating SVG with CSS and SMIL”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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