Shapes with SVG ans CSS
This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline SVG attributes and external CSS. It shows how CSS classes, such as `.lines`, override default SVG presentation properties like `stroke` and `stroke-width`, while `fill` and `stroke` attributes set directly on elements take precedence. The visualization is rendered entirely with SVG in static HTML, using no JavaScript libraries, and includes a group with a translation transform to position shapes collectively. The code also highlights inheritance of styling from parent `<g>` elements to child shapes.