Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG fundamentals

Public visualization

Viewing a saved revision (read-only)

345373c9a6aa4ce2be9a2b6807b0b22a

SVG fundamentals

0 stars0🌍 Public
PPlaban Kumar Mondal
Last edited May 14, 2022
Created on May 14, 2022
Forked from HTML Starter

This example demonstrates fundamental SVG shapes—circles, a rectangle, and a line—rendered directly through inline SVG markup in an HTML document. It shows how to set basic visual properties like fill colors, stroke styling, and coordinate positions for each shape. The visualization uses no external libraries, relying solely on native SVG elements and attributes within the `<svg>` tag. The drawing is static, with shapes placed at fixed pixel coordinates (e.g., a blue circle at 50,50 and a gray rectangle at 200,100), illustrating how to construct simple vector graphics without additional JavaScript or data binding.

AI-generated description

Demonstration of SVG