Scalable Vector Graphics (SVG) describes a picture as shapes rather than pixels: a circle is a center and a radius, a logo is a handful of paths. One file stays sharp at any size and pixel density. Being XML, it lives in the DOM, open to CSS and JavaScript.
SVG suits logos, icons, diagrams, maps and charts; photographs and scenes with thousands of moving objects belong to Canvas 2D, WebGL and WebGPU (Canvas 2D-WebGPU). D3.js builds D3.js 18,089 charts on this chapter. The running example is BookNest, the small online bookshop from earlier volumes: you draw its logo, build its icon set, paint cover icons for its six books and make a clickable rating widget.
What you will learn
How the viewBox maps a drawing to the screen, and which parts of SVG 2 browsers support.
How to draw shapes, paths, markers and strokes, and structure them for reuse and accessibility.
How to paint with gradients, patterns, clipping, masks and filters, and set text.
How to animate SVG and handle pointer events, and how to sanitize and optimize it.