The six shapes, and paint order
Plain SVG markup, no script needed to draw it. The script only reports the order. Each shape carries only the attributes it needs.
SVG has six basic shapes: rect, circle, ellipse, line, polyline and polygon. Each needs a few attributes; a missing one counts as 0 and usually draws nothing, a negative size is an error, and later shapes paint over earlier ones.
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.
Write the SVG markup for a bar chart bar for Monday: a rectangle 40 wide and 119.4 tall, standing on a baseline at y = 180, filled #e76f51, with its left edge at x = 30. What is its y?
A rectangle shows nothing and the Console is empty. List three attribute mistakes that cause this.
Explain it without notes
Which attributes does each of the six basic shapes need?
Why is a line with no stroke invisible, and what does the browser print about it?
How does the browser decide which shape is on top, and how do you change it?
What happens with a negative width, and what with a missing width?
Preview
Console
Nothing logged yet.Expected console output
Paint order: rect rect circle ellipse line polyline polygon rect rect rect rect