SVG
Vector graphics described as markup.
SVG is taught here in 3 lessons, running from Shapes and coordinates through to Animation, embedding and accessibility. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.
| Track | Front-end Development |
| Lessons | 3 |
| Level | Beginner |
| Reading time | about 39 minutes |
| Prerequisites | Helpful, but not required: Chart.js |
Lessons
- Shapes and coordinatesThe viewBox, the eight drawing primitives, paths as a mini language, and grouping with defs and use.
- Styling with CSS and paint serversPresentation attributes versus CSS rules, fill and stroke semantics, gradients and markers, and transforms that respect the element's own box.
- Animation, embedding and accessibilitySMIL timing, CSS keyframes inside the document, the four ways to embed an SVG, and how to make graphics readable by assistive technology.
More in Front-end Development
HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js Font Awesome
FAQ
How long does the SVG course take?
It has 3 lessons, about 39 minutes of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for SVG?
Not strictly. It helps to have read Chart.js first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after SVG?
Continue with Font Awesome (3 lessons), the next course in Front-end Development.
Last refreshed 2026-09-18.