M
MDN SVG Tutorial
Mozilla's official SVG tutorial covering basics to advanced features
Category
Learn
Featured
Hand-picked
Basics
About MDN SVG Tutorial
MDN's SVG tutorial is the most authoritative free reference for SVG on the web. Written and maintained by Mozilla, it covers everything from basic shapes to advanced filters, with live examples you can edit inline. It's the resource the SVG spec authors themselves link to.
Key Highlights
- Complete path from basic shapes to advanced filters and animations
- Live editable examples on every page
- Comprehensive element and attribute reference
- Free, no login, continuously maintained
Our Take
Start here if you actually want to understand SVG rather than just paste snippets — it's the closest thing to an official manual.
Resource Info
CategoryLearn
Similar Resources
C
CSS-Tricks SVG Guide
Complete SVG guide covering inline usage, CSS integration, and animations
S
SVG on the Web
Comprehensive guide to using SVG in web development
w
web.dev SVG Guide
Google's official SVG optimization and best practices guide
W
W3Schools SVG
W3Schools SVG tutorial for beginners with interactive examples