Missing, odd and wrong attributes
A bad value prints a real browser error right after its line. Chromium's wording is shown; Firefox and Safari phrase these errors differently.
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
rect without width : x 10, width 0, height 30
circle without r : x 50, width 0, height 0
circle without cx : x -10, width 20, height 20
line without x2 : x 0, width 50, height 0
ellipse with only rx : x 20, width 60, height 60
rect width 50% : x 0, width 100, height 20
polygon, odd numbers : x 10, width 40, height 40
rect width -20 : x 0, width 0, height 20
Error: <rect> attribute width: A negative value is not valid. ("-20")
rect width abc : x 0, width 0, height 20
Error: <rect> attribute width: Expected length, "abc".
rect width empty : x 0, width 0, height 20
Error: <rect> attribute width: Unexpected end of attribute. Expected length, "".
A line with no stroke attribute has stroke: none
A polyline with no fill attribute has fill: rgb(0, 0, 0)