Preparing SVGs That Animate Well
SVG animations can feel like a trip back to Saturday-morning cartoons. But making them load fast and run smoothly isn’t about nostalgia — it’s about clean design, lean code, and a workflow that keeps complex files easy to animate. That means thinking about accessibility, performance, and maintainability from the very first path you draw.
The process starts with how you draw. Tools like Adobe Illustrator often convert bitmaps into vectors with far too many groups, layers, and masks. A better approach is to work from a reference image and trace simple shapes with the Pen tool in a design app like Sketch or Affinity Designer. The goal is to keep anchor points minimal from the outset — every extra point inflates file size, and simplifying paths early makes SVGs much smaller with little to no visible difference.
Drawing for Motion From the Start
If parts of an illustration will move independently during animation, keep those parts as separate outlines. For example, a character’s body, head, collar, and tie should each be their own path so the head can nod or the tie can flap on its own. A well-placed collar can hide the seams between moving pieces.
Once outlines are in place, draw background shapes that fill those areas with color. These sit behind the outlines and don’t need to match them exactly, so they can be even simpler. Note that neither Affinity Designer nor Sketch includes a path-simplification tool; Adobe Illustrator can help shave a few extra kilobytes off these background shapes if you have access to it.
Optimising the Export
File size isn’t just a matter of metadata. The export settings from your design app matter as much as the drawing itself. Default exports from Illustrator include unnecessary groups, masks, and bloated path data. Sketch’s output is only marginally better, even with its built-in SVGO compressor. The most reliable option is Jake Archibald’s SVGOMG, which runs on SVGO v3 and consistently produces the leanest results.
Building SVGs in Layers
Even well-optimized code becomes unmanageable when every visual element lives in a single, monolithic SVG. Locating a specific path or group in that wall of markup is like hunting for a needle in a haystack.
The solution is to develop the file in layers, exporting and optimising one set of elements at a time — always in the order they’ll appear in the final document. Paste each cleaned-up section into the master SVG as you go. Starting with backgrounds and title graphics, then adding filters, props, and characters, keeps the code readable and logical.
Because each layer is exported from the same-sized artboard, alignment and positioning take care of themselves — every element slots into place automatically. Taking the time to add code comments during this layering process makes future edits and animation tweaks far easier. Each component is identifiable at a glance, which makes animating smoother too.
Reusing Elements With <use>
Repetitive shapes are a classic source of SVG bloat. One title card recreation contains 80 stars in three sizes. Combining all of them into a single path brings the file down to 3KB, but animating individual stars pushes it back up to around 5KB. Moving fill values to the parent group trims a little more, but a better approach is to define each star size once as a reusable template.
With templates in place, changing a star’s design means updating it in only one spot — every instance refreshes automatically. Each star is then referenced with <use> and positioned via x and y attributes. This keeps the markup clean and the file light while preserving the flexibility to animate dozens of repeated elements individually.
Animation Without JavaScript
A starfield with a natural, random-looking twinkle comes down to variation. Define a keyframe animation that cycles through opacity levels, then apply it to every use element inside the stars group. To make the effect convincing, stagger animation delays and durations using nth-child selectors. Start with quick, frequent sparkles and layer in slower, more irregular rhythms with pauses. The result is a complex-looking effect built from simple, well-structured code.
The same approach applies to character motion. A head wobble, a waving tie, a swinging broom, and a gentle rotation of the whole figure all run from the structured, layered SVG:
Editorial Note
Whether you’re recreating a classic cartoon title card or animating interface icons, the process stays the same:
- Start clean by drawing with minimal anchor points.
- Optimise early with the right export tools.
- Structure everything — layer by layer, element by element — with animation in mind.
SVGs offer plenty of creative freedom, but only when they remain lean and manageable. A disciplined production process means less time untangling code and more time bringing the work to life — all without writing a single line of JavaScript.
