Guides and notes on animated SVGs: CSS @keyframes, converting images to SVG, exporting animations, and getting good results from AI.
Follow along by RSS.
Blog
Animated SVG loading spinners with pure CSS
Five copy-paste SVG loading spinners in pure CSS keyframes, no JavaScript. Includes accessible markup (role=status, aria-label) and reduced-motion handling.
Animated SVG vs Lottie vs GIF vs video: which should you use?
A decision guide to animated SVG, Lottie, GIF and video: comparison table, code for each, and a plain list of when not to use SVG.
CSS @keyframes for SVG: a practical guide
Which properties animate on SVG elements, how transform-box: fill-box fixes pivots, easing, staggering with animation-delay, reduced motion and debugging.
How to animate an SVG in 2026: CSS, SMIL, JavaScript or Lottie
Four ways to animate an SVG, compared honestly: CSS, SMIL, JavaScript and Lottie. Working code, browser support and when an AI tool is worth using.
How to convert a PNG or JPG to SVG (and when you shouldn't)
Convert PNG or JPG to SVG by tracing the pixels into paths. Compare Inkscape, potrace and AI vectorizers, clean the input, and shrink the output with SVGO.
SVG animation performance and accessibility checklist
A practical checklist for fast, accessible SVG animation: transform and opacity, will-change, off-screen pausing, reduced motion, title and desc, aria-hidden, SVGO.