Ship production-ready SVGs. Learn to optimise file size with SVGO, export cleanly from design tools, and establish an efficient SVG workflow.

Bring SVGs to life with JavaScript. Learn to manipulate SVG elements, handle events, create dynamic graphics, and build interactive visualisations.

Make SVGs that scale beautifully across all screen sizes. Master viewBox, preserveAspectRatio, and CSS techniques for fluid, responsive graphics.

Make your SVGs usable by everyone. Learn to add meaningful titles, descriptions, and ARIA attributes so screen readers can interpret your graphics.

Stop repeating yourself. Learn to define reusable SVG components with symbol and use elements, and build efficient icon sprite systems.

Add text to your SVGs with full control over positioning, styling, and even flowing text along curved paths. Learn the text, tspan, and textPath elements.

Apply visual effects like blur, drop shadows, colour manipulation, and more using SVG's powerful filter primitives. Chain effects together for complex visual treatments.

Control visibility with clip paths for hard edges and masks for soft transparency. Create reveal effects, spotlight animations, and complex composite shapes.

Learn to create linear and radial gradients, plus repeating patterns for textures and backgrounds. Master the defs element for reusable SVG definitions.

Master the popular line drawing effect using stroke-dasharray and stroke-dashoffset. Create smooth animations that make paths appear to draw themselves.