A responsive SVG adapts to the space provided by its parent while keeping a stable internal drawing space. Treat the SVG as a whiteboard: shapes use coordinates inside that whiteboard, while the browser scales the result for the available layout width. section 1.2.2 section 4.4
Define the drawing coordinate system with `viewBox="0 0 900 300"`, then omit `width` and `height`. The last two viewBox values establish the intended drawing width and height; without fixed rendered dimensions, the container can adapt to its parent and preserve its aspect ratio. Put the SVG in a fluid wrapper when the page needs a maximum content width. section 1.2.2 section 4.4
A fluid shape gallery
Wrap a 900-by-300 drawing space in a container that is `width:100%`, capped with `max-width:1200px`, and center it with automatic margins. Inside, position lines, rectangles, circles, ellipses, paths, and labels using the fixed viewBox coordinates. The graphic scales as one coordinated composition rather than requiring every shape position to change. section 1.2.2
For layouts whose chart structure changes with screen width, calculate dimensions reactively instead. Bind the window width, choose a column count at breakpoints, derive each small multiple’s width and height, then derive total SVG height from the number of rows. Render the SVG only after its computed dimensions exist. section 14.4.1
const pieChartWidth = 300;
const pieChartHeight = 300;
const svg = d3.select("#arc")
.append("svg")
.attr("viewBox", [0, 0, pieChartWidth, pieChartHeight]);
This compact D3 setup appends an SVG with a 300-by-300 viewBox and no fixed width or height, allowing its parent to control the rendered size. section 4.4
