Same scene, four viewBoxes: scale, zoom and pan
Zoom is a smaller viewBox, pan is a different start. The numbers are the browser's own, read back from the drawing.
The viewBox attribute gives an SVG its own coordinate window, so the drawing scales to whatever size the screen gives it. preserveAspectRatio decides what happens when window and screen have different shapes: fit, fill, or stretch.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A drawing is 380 wide and 210 tall (as in the Phase 0 week chart). Write the opening <svg> tag so it fills its container's width and keeps the right shape.
You want to zoom into the area from x = 100 to x = 200 and y = 20 to y = 70 of a drawing. What viewBox do you write, and what is the scale if the SVG is 400 pixels wide?
Explain it without notes
What do the four numbers of a viewBox mean, and how does the browser use them?
What is the difference between meet and slice?
Why does an SVG with width="100%" and no viewBox stay 150 pixels tall?
What do you see when a viewBox is 0 0 0 100, 0 0 -200 100 and 0 0 NaN 100?
Preview
Console
Nothing logged yet.Expected console output
viewBox no viewBox -> scale 1, moved by 0, 0
viewBox 0 0 100 50 -> scale 2, moved by 0, 0
viewBox 50 25 100 50 -> scale 2, moved by -100, -50
viewBox 0 0 400 200 -> scale 0.5, moved by 0, 0