SVG

Vector graphics described as markup.

SVG is taught here in 12 lessons, running from Shapes and coordinates through to Performance, rendering cost and canvas trade-offs. 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.

Lessons

1. Shapes and coordinatesThe viewBox, the eight drawing primitives, paths as a mini language, and grouping with defs and use.
2. 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.
3. 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.
4. Authoring, tooling and optimising SVG filesClean up design-tool output, configure SVGO for a real project, keep the viewBox honest, and decide between a font, a sprite and inline markup.
5. Paths in depth: commands, curves and arcsRead and write path data fluently, choose between quadratic, cubic and arc curves, and use the tricks that only path data can do.
6. Text, fonts and text on a pathLay out text with tspan, control baselines, put text on a curve with textPath, and handle font loading honestly.
7. Transforms, clipping and maskingUnderstand the transform list and its order, set a sane transform origin, and choose between clipPath and mask for the result you want.
8. Filters and visual effectsUnderstand the filter pipeline, use the primitives that earn their cost, and treat filters as the expensive feature they are.
9. Responsive, fluid and data-driven SVGSet preserveAspectRatio deliberately, size SVG with CSS, and hand-draw a chart — scales, axes, marks — from real data.
10. Interactivity, scripting and framework integrationHandle pointer and focus events, use hit areas and measurement APIs, and render SVG from React, Vue and Angular without hydration mismatches.
11. Symbol sprites, icon systems and reuseBuild a symbol sprite, theme it with currentColor, weigh the external-file caching trade-off, and keep an icon set consistent.
12. Performance, rendering cost and canvas trade-offsUnderstand what makes an SVG expensive, find the hot spots, and use a decision framework for choosing between SVG, canvas and CSS.

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