SVG Fundamentals
This example demonstrates fundamental SVG shapes using static markup, showing how basic geometric elements like circles, rectangles, and lines are drawn on a canvas. It displays a red circle, a white square with a black border, and a horizontal red line, each positioned and styled directly through SVG attributes. The code uses no external libraries, relying solely on native SVG elements such as `<circle>`, `<rect>`, and `<line>` within an HTML page. Styling is applied via inline attributes like `fill`, `stroke`, and `stroke-width`, illustrating the manual construction of vector graphics without data binding or interactivity. The rendering approach is explicit, with fixed coordinates and dimensions defining each shape’s placement.