Shapes and Colors with SVG and CSS
This example demonstrates how SVG shapes inherit styling from CSS and group elements, using circles, rectangles, lines, and paths. It shows color applied directly via attributes like `fill="red"` or through CSS classes, with stroke properties controlling line appearance. The graphic uses a scale transform to enlarge a 960×500 SVG canvas, while a nested group applies translation and the `.lines` class sets stroke width and color. Rendering relies on raw SVG elements and external stylesheet rules, with no JavaScript libraries involved.