Define once, reuse, fill, clip and mask
Look at the picture as well: the clipped bars end at the dashed window, and the flat gradient line is missing on purpose.
A <g> groups shapes so they move and style together. <defs>, <use> and <symbol> define a drawing once and reuse it. Gradients and patterns fill shapes, and clip paths and masks cut them, while the hidden parts stay in the page.
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 a <g> that moves three circles 50 across and 40 down, and makes all of them #2a9d8f except one that is #e76f51. What are the page coordinates of a circle with cx="10" cy="10" inside it?
Write a <defs> with one <symbol id="dot" viewBox="0 0 10 10"> holding a circle, and two <use>s that draw it at 20 by 20 and 40 by 40.
Explain it without notes
What do the children of a <g> inherit, and what does a transform on the group do to them?
Why does translate(300 20) rotate(30) put a shape in a different place from rotate(30) translate(300 20)?
What is the difference between <symbol> and <g>, and what happens if a <use> of a symbol has no width and height?
A clip path hides 30 of 40 bars. How many bars are still in the page, and why does that matter?
Preview
Console
Nothing logged yet.Expected console output
Bars in the page: 40, visible through the clip: 10
The clipped group still measures 398 units wide
Uses of the symbol: 3 (the path is written once)
A symbol used with no width and height measures 200 x 200 in a 300 x 200 SVG
A use of a missing id measures 0 x 0 (and prints no error)