Shapes with SVG and CSS
A single SVG canvas displays a small collection of primitive shapes, including a red circle, a blue square, a diagonal line, and a multi-segment path. The shapes are grouped and transformed using nested SVG `<g>` elements, with the outer group scaled and inner groups applying fill and stroke styles. The image is rendered directly in an HTML page with inline SVG markup, using CSS-like presentation attributes such as `fill`, `stroke`, and `stroke-width` to define the visual appearance. No external JavaScript libraries or data sources are used.