Where shapes land, and where they vanish
Nothing here prints an error: a shape outside the drawing area is clipped quietly, which is why a missing shape is hard to find.
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
box: x 50 to 150, y 25 to 75 -> fully inside
corner: x -30 to 30, y -30 to 30 -> partly cut off
left: x -35 to 15, y 85 to 135 -> partly cut off
off: x 305 to 355, y 50 to 100 -> not drawn
dot: x 235 to 265, y 95 to 125 -> fully inside
Shapes in the DOM: 5