Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

3c19e5b542a44ef3b6d69ea34c083252

SVG Fundamentals

0 stars0🌍 Public
MMark Heo
Last edited Jan 16, 2023
Created on Jan 16, 2023
Forked from HTML Starter

This example demonstrates fundamental SVG shape elements and their styling within an HTML document, using the SVG namespace directly without additional JavaScript libraries. It shows how circles, rectangles, lines, and a path are rendered with specific coordinates, dimensions, and fill or stroke properties. The code uses inline SVG markup with attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for the path, along with presentation attributes like `fill`, `stroke`, and `stroke-width`. The static composition presents primitive shapes with varied colors and strokes to illustrate basic vector graphics capabilities.

AI-generated description

A demonstration of SVG shapes.