Optimising SVGs for Animation: Andy Clarke's Workflow for Faster, Cleaner Graphics
By
[email protected] (Andy Clarke)
Kettled twice. Extra chewy, extra trustworthy.
Summary
Web designer Andy Clarke shares his workflow for preparing, optimizing, and structuring SVGs for animation and web performance. The article covers techniques to make SVG files faster, simpler, and more manageable, drawing inspiration from classic Hanna-Barbera cartoon title sequences recreated with CSS, SVG, and SMIL animations. It emphasizes that smooth, fast-loading animations require clean, well-optimized SVG code rather than just nostalgic inspiration.
Key quotes
· 3 pulledSVG animations take me back to the Hanna-Barbera cartoons I watched as a kid.
But getting animations to load quickly and work smoothly needs more than nostalgia.
It takes clean d
You might also wanna read
Exploring the Underutilized Potential of SVG Vector Graphics
The article discusses the underutilized potential of SVG (Scalable Vector Graphics) format, highlighting its capabilities as vector graphics
SVG.js: Lightweight JavaScript Library for SVG Manipulation and Animation
SVG.js is a lightweight JavaScript library for manipulating and animating SVG graphics. It has no dependencies and aims to be as small as po
svgjs.dev·6mo ago