Animations Part 4: Optimising SVGs

SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like Wacky RacesThe Perils of Penelope Pitstop, and, of course, Yogi Bear. They inspired me to lovingly recreate some classic Toon Titles using CSS, SVG, and SMIL animations.

But getting animations to load quickly and work smoothly needs more than nostalgia. It takes clean design, lean code, and a process that makes complex SVGs easier to animate. Here’s how I do it.

Whether for personal projects or commercial work, preparing SVGs well ensures they’re accessible. Optimising them ensures they load quickly, especially on mobile, and thinking carefully about how they’re structured makes maintaining them easier. I’ve developed a process that balances visuals with accessibility and performance and makes complex SVGs easier to work with.

So, to explain my process, I’ve chosen an episode of The Yogi Bear Show called “Bewitched Bear,” first broadcast in January 1960. In this story, Yogi steals a witch’s broom to help him grab “pic-a-nic” baskets.

“Hey, hey, hey!”

Author Details

Selvakumar David

MKTG Admin

Leave a Comment