SVG Tutorials

Step-by-step lessons from basic shapes to scripting

These tutorials follow a progressive path from SVG fundamentals through production-ready techniques. Work through them in order to build a solid foundation, or jump to a topic you need.

Foundations

  1. What is SVG? — Vector vs. raster graphics, when to reach for SVG, and the structure of an SVG document.
  2. Using SVG on the Web — Inline SVG, <img>, <object>, CSS background, and data URIs compared.
  3. Basic Shapes — rect, circle, ellipse, line, polyline, and polygon.
  4. Paths — The d attribute: move, line, Bézier curves, and arcs.
  5. Text — Positioning text, tspan for fine control, and text on a path.
  6. Groups & Transforms — <g> for grouping and translate, rotate, scale, and skew transforms.
  7. viewBox & Coordinate System — Responsive SVG with viewBox, preserveAspectRatio, and the user coordinate system.

Building Blocks

  1. Reuse: defs, use, symbol & Markers — Define once, reference anywhere — icon systems, sprite sheets, and path markers.
  2. Clipping & Masking — clipPath for hard edges and mask for soft, luminance-based transparency.
  3. Gradients & Patterns — Linear and radial gradients, tiling patterns with patternUnits.
  4. Filters & Effects — Gaussian blur, drop shadows, color matrix, and compositing with <feBlend>.

Styling, Animation & Scripting

  1. Styling SVG with CSS — currentColor, custom properties, the cascade, and presentation attributes vs. CSS.
  2. Animating SVG — CSS transitions and keyframes, SMIL animate, and the Web Animations API.
  3. Scripting SVG with JavaScript — The SVG DOM, createElementNS, event handling, and coordinate transforms.

Production

  1. Accessibility — <title>, <desc>, ARIA roles, and keyboard interaction for interactive SVGs.
  2. Optimization & Delivery — SVGO, sprite workflows, HTTP headers, and choosing the right serving strategy.