{"version":"1.0","type":"rich","title":"SVG Fundamentals","description":"This example demonstrates basic SVG shapes—a red circle, a yellow rectangle with a blue stroke, and a navy line—rendered directly in an HTML page using the SVG namespace. It shows how CSS styling and inline presentation attributes control the visual appearance of these elements. The second lesson builds on this by adding a CSS `transition` to a rectangle, so hover interactions animate the fill color and stroke width over three seconds. The code uses plain SVG markup with CSS rules, not a JavaScript library like D3 or React.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/795502da16b8488d8cd6c5582578d958?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}