Learn
SVG basics, animation, paths, filters, and hands-on tutorials
19 curated resources
MDN SVG Tutorial
Mozilla's official SVG tutorial covering basics to advanced features
CSS-Tricks SVG Guide
Complete SVG guide covering inline usage, CSS integration, and animations
SVG on the Web
Comprehensive guide to using SVG in web development
web.dev SVG Guide
Google's official SVG optimization and best practices guide
W3Schools SVG
W3Schools SVG tutorial for beginners with interactive examples
SMIL Animation Guide
MDN's guide to SVG animation with SMIL, native animation techniques
CSS-Tricks SVG Animation
Complete guide to SVG animations using CSS and JavaScript
GreenSock SVG Animation
GSAP official SVG animation documentation, professional animation solutions
SVG Path Tutorial
MDN's detailed guide to SVG path 'd' attribute
SVG Filter Effects
SVG filter effects including blur, shadow, and more
Yoksel SVG Tools
Collection of SVG visualization tools to understand SVG syntax
SVGO Documentation
Official documentation for SVGO, the SVG optimization tool
Codrops SVG Tutorials
Codrops SVG creative tutorials collection with practical examples
SVG.js Documentation
SVG.js 3.0 official documentation, lightweight SVG manipulation library
Snap.svg Documentation
Snap.svg official documentation, SVG library by Adobe
SVG Animation
Production-ready SVG animation tutorials with examples, implementation notes, accessibility guidance, and performance tradeoffs
freeCodeCamp SVG Guide
freeCodeCamp's SVG beginner-to-advanced guide with detailed code examples
Sara Soueidan Blog
Technical blog by a leading SVG expert covering SVG patterns, animations, and accessibility
Smashing Magazine SVG
Renowned front-end design publication with in-depth SVG articles and practical tutorials