SVG
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Connect vector coordinates with DOM semantics to build an accessible data map.
Prerequisites
HTML and CSS; coordinates
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Vector Paths and Coordinates
- 01. viewBox and Vectors — Editable example
- 02. Basic Shapes and Attributes — Editable example
- 03. Path Commands and Closing Paths — Editable example
- 04. Adjusting Bézier Curves — Editable example
- 05. Arcs and Donut Segments — Editable example
- 06. Groups and Transform Order — Editable example
- 07. Symbols and Reuse — Editable example
Stage 2 · Styles, Effects, and DOM Input
- 08. Styles and Themes — Editable example
- 09. Gradient Coordinates — Editable example
- 10. Clips and Masks — Editable example
- 11. Filter Regions and Cost — Editable example
- 12. Text and Data Labels — Editable example
- 13. Screen Coordinates to SVG — Editable example
- 14. DOM Interaction — Editable example
Stage 3 · Accessibility and Data Maps
- 15. Accessible Names and Descriptions — Editable example
- 16. Pointer Event Regions — Editable example
- 17. Dragging and Capture — Editable example
- 18. Zooming and Panning — Editable example
- 19. Data and DOM Updates — Editable example
- 20. Connectors and Graph Layout — Editable example
- 21. Animation and Reduced Motion — Editable example
Stage 4 · Export and Large-Scale Comparisons
- 22. Exporting SVG Files — Editable example
- 23. Large Datasets and Update Cost — Editable example
- 24. Visible Regions and Level of Detail — Editable example
- 25. Canvas Comparison Renderer — Editable example
- 26. Integrating the Map Editor — Editable example
- 27. Reproducible Comparison Experiments — Editable example
- 28. Comparing with Canvas — Editable example
Capstone project and deliverables
A keyboard-editable SVG node map, standalone SVG export, and a report comparing Canvas with the same data
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.