Andy Clarke shares his method for optimizing and structuring SVGs for animation, balancing aesthetics with performance. He emphasizes the importance of clean design and lean code, suggesting tools like Sketch for creating SVG paths while avoiding unnecessary complexities from software like Adobe Illustrator. Clarke illustrates his approach using the classic cartoon episode 'Bewitched Bear,' stressing the need for simple structures to enhance accessibility and maintainability, particularly for mobile use. His process ultimately makes complex SVGs easier to manage and animate effectively.
Keeping things simple is key to making SVGs that are optimised and ready to animate. Tools like Adobe Illustrator convert bitmap images to vectors, but the output often contains too many extraneous groups, layers, and masks. Instead, I start cleaning in Sketch, work from a reference image, and use the Pen tool to create paths.
Optimising SVGs ensures they load quickly, especially on mobile, and thinking carefully about how they're structured makes maintaining them easier.
Collection
[
|
...
]