Which style wins? Stroke width and opacity
Every colour printed is what the browser actually uses (getComputedStyle), not what the attribute says. Look at the picture too: the two squares at the bottom compare opacity and fill-opacity.
SVG shapes are coloured with fill (inside) and stroke (outline), set either as attributes or in CSS, where CSS wins. Text is placed by its baseline and anchor, never wraps, and overflows silently when a label is too long.
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.
Make a <text> label that reads Sat centred under a bar whose left edge is at x = 280 and width 40, 14 units below a baseline of y = 180. Write the tag.
A rectangle uses fill="currentColor". Write the CSS so that it is dark in light mode and light in dark mode, using the class dark on body.
Explain it without notes
Which wins, a fill attribute or a CSS rule? What beats a CSS class?
Where is the baseline of an SVG text, and what does text-anchor="end" do?
How wide is a stroke on a rectangle, relative to its edge?
What happens when a label is longer than its slot, and how do you handle it?
Preview
Console
Nothing logged yet.Expected console output
attribute only: rgb(231, 111, 81)
attribute + CSS class: rgb(29, 78, 216)
class + inline style: rgb(42, 157, 143)
currentColor (light): rgb(38, 70, 83)
currentColor (dark): rgb(233, 196, 106)
attribute-only square in dark mode: rgb(231, 111, 81) (unchanged: nothing sets color for it)
Bar geometry: x 330 to 430, but the ink is x 324 to 436