Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

2b306cd3e11b49b0b754ebf0bdeb41fd

SVG Fundamentals

0 stars0🌍 Public
JJhonatan Perera
Last edited May 5, 2022
Created on May 5, 2022
Forked from HTML Starter

This example demonstrates the core building blocks of SVG graphics, showing how basic shapes combine to form a static vector illustration. It features a red circle, a blue rectangle, a thick navy diagonal line, and an open path that creates a two-segment angular stroke on a 960x500 canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in an `index.html` file without any JavaScript library. Each shape is styled via presentation attributes like `fill`, `stroke`, and `stroke-width`, while a comment in Spanish notes the markup. This is a pure, hand-authored SVG example, with no external data source.

AI-generated description

A demonstration of SVG concepts