Introduction to SVG

What is SVG?

An introduction to Scalable Vector Graphics — what SVG is, how it differs from raster formats like PNG and JPEG, and why it is the preferred format for icons, illustrations, and data visualisations on the web. Covers the SVG coordinate system, the viewport, and how browsers render SVG. Includes a first hands-on example: drawing a simple shape directly in HTML.

Start

SVG in HTML — Inline, Image, and CSS

The three ways to use SVG in a web page: inline inside HTML, as an <img> src, and as a CSS background-image. Explains the trade-offs of each approach — styling, scripting access, caching, and CORS. Shows when to choose each method and common pitfalls to avoid.

Start

Basic Shapes

A thorough look at the six built-in SVG shape elements: rect, circle, ellipse, line, polyline, and polygon. Covers the key attributes for each shape — position, size, radii, and point lists. Hands-on exercises build a simple scene using only basic shapes.

Start

The path Element

The most powerful SVG element — path — and its d attribute mini-language. Covers all path commands: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, and Z/z. Explains absolute vs relative coordinates, and how to read and hand-write path data. Includes practical examples: drawing arrows, speech bubbles, and custom icons.

Start

Fill, Stroke, and Styling

How to colour and style SVG elements using presentation attributes and CSS. Covers fill, stroke, stroke-width, stroke-dasharray, stroke-linecap, stroke-linejoin, and opacity. Explains the CSS cascade as it applies to SVG, and when to use attributes vs stylesheets. Introduces currentColor for theme-aware icons.

Start

Text in SVG

Placing and styling text with the text, tspan, and textPath elements. Covers font properties, text-anchor, dominant-baseline, and letter-spacing. Shows how to flow text along a curved path and how to wrap text in SVG. Discusses accessibility concerns with SVG text and screen readers.

Start

Reuse — defs, use, and symbol

Avoiding repetition with SVG's reuse mechanisms. Covers the defs element for defining non-rendered content, the use element for stamping copies, and symbol for creating reusable icon components with their own viewport. Shows how to build a practical SVG sprite sheet for an icon system.

Start

Transforms and Coordinate Spaces

Moving, rotating, scaling, and skewing elements with the transform attribute and CSS transforms. Explains how each transform affects the local coordinate system and how nested transforms compose. Covers the viewBox and preserveAspectRatio attributes for scaling SVG to any container size. Practical examples: building a clock face, a pie chart slice, and a rotated label.

Start

Gradients and Patterns

Filling shapes with linearGradient and radialGradient, including stop elements, gradientUnits, and gradientTransform. Creating repeating tile fills with the pattern element. Shows how gradients and patterns are defined in defs and referenced by id, and how to build a polished card background or chart element.

Start

Clipping and Masking

Controlling visibility with clipPath (hard-edge clipping) and mask (alpha/luminance masking). Explains the difference between the two, when to use each, and the clipPathUnits / maskContentUnits coordinate spaces. Practical examples: a circular avatar crop, a progress bar reveal, and an image-reveal animation.

Start

SVG Filters

An introduction to the SVG filter primitive system — feGaussianBlur, feColorMatrix, feComposite, feBlend, feDropShadow, and feTurbulence. Explains the filter region, in/result wiring, and how primitives chain together. Practical use cases: drop shadows, glow effects, grayscale conversion, and a hand-drawn texture effect.

Start

Animation — SMIL and CSS

Two approaches to animating SVG: CSS transitions/keyframes and SMIL (animate, animateTransform, animateMotion). Covers when CSS animations are sufficient and when SMIL's path-following and attribute targeting are necessary. Practical examples: a spinning loader, a drawing stroke animation with stroke-dashoffset, and an icon that animates along a path.

Start

SVG and JavaScript

Scripting SVG with the DOM API — querying elements, reading and setting attributes, and listening to events. Covers createElementNS for dynamically generating SVG, and how to build interactive elements such as a draggable shape or a hover tooltip. Introduces the basics of D3.js as a higher-level tool for data-driven SVG.

Start

Accessibility and Best Practices

Making SVG accessible to screen readers and assistive technologies using title, desc, role, and aria-label. Covers focusability, keyboard interaction, and colour contrast requirements. Best practices for file size: removing editor bloat, using symbols, and choosing the right level of path precision. A checklist for production-ready SVG.

Start

Real-World Projects

Putting everything together through three end-to-end projects: a fully accessible icon library, a responsive infographic with animated charts, and an interactive SVG map. Each project reinforces authoring, styling, reuse, animation, and scripting concepts from earlier chapters. Closes with guidance on tooling — Inkscape, Figma SVG export, SVGO optimisation, and integrating SVG into React and Vue components.

Start