HowToCodePage

SVG

Vector graphics described as markup.

💡
This course has 3 lessons. Start with the first one and use the next / previous links at the bottom of each lesson — the sidebar keeps the whole course 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.

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

Last refreshed 2026-09-17.