This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline presentation attributes and an external CSS stylesheet. The graphic shows a progression from default black shapes to explicitly colored fill and stroke properties, then to grouped elements that inherit common styling like a brown fill with a black outline. A separate group applies stroke styling to line and path elements via CSS class selectors, including a custom stroke-linejoin. The page uses an HTML5 structure with a fixed-width SVG canvas, while the CSS file manages global layout and overrides shape appearance based on class and element type.