How big is an SVG? Nine situations
The first line is the default every SVG falls back to. The orange squares show the shape at (0, 0) in each drawing area.
SVG places every shape with numbers measured from the top-left corner: x grows to the right and y grows downwards. Anything outside the SVG's width and height is clipped, silently, and an SVG with no size is 300 by 150.
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 rectangle should sit in the top-right corner of a 300 by 150 SVG, 60 wide and 30 tall, touching both edges. What are its x and y? Write the tag.
A circle of radius 20 is centred at (300, 75) in a 300 by 150 SVG. How much of it shows? What would you change to show all of it, without moving the circle?
Explain it without notes
Where is the point (0, 0), and which way do x and y grow?
What size is an SVG with no width and height, and what happens to a shape outside that area?
Why does a chart that maps bigger values to bigger y look upside down?
What is a user unit, and when does it equal a pixel?
Preview
Console
Nothing logged yet.Expected console output
no size at all : 300.00 x 150.00
width only : 200.00 x 150.00
height only : 300.00 x 80.00
width and height : 200.00 x 80.00
decimals : 120.50 x 60.25
2in by 1in : 192.00 x 96.00
10mm by 10mm : 37.78 x 37.78
CSS beats the attribute: 250.00 x 80.00
width 0 (invisible): 0.00 x 80.00