SVG intro

100%

✓ Published1🌍 Public

Last edited Sep 14, 2022

Created on Sep 14, 2022

This example introduces SVG for data visualization by displaying basic geometric shapes. It shows a black circle, a red circle, a navy line, and a green path with a navy stroke, all enclosed within a brown rectangular border on a 1000-by-101 canvas. The code uses inline SVG elements such as `circle`, `line`, `path`, and `rect` directly in an HTML document. The shapes are not derived from external data; they are hardcoded primitives demonstrating static vector rendering. The path defines a simple two-segment line, and the border uses a `stroke-width` of 2, with the page also containing plain HTML text.

AI-generated description

#COOL this is an introduction for SVG lib on data visuallization.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

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.

JJhonatan Perera

87% match

Loading thumbnail…

Class 1

This example introduces basic SVG primitives for data visualization. It draws shapes including circles, a line, a path, and a rectangle, with some elements filled in red or green and strokes in navy or brown. The code uses raw SVG elements such as `<circle>`, `<line>`, `<path>`, and `<rect>` within an HTML page. The visualization is rendered as static SVG, with no interactivity, and appears to demonstrate shape fundamentals rather than represent a specific dataset.

AAbdure-bit

87% match

Loading thumbnail…

intro_svg

This example demonstrates basic geometric shapes drawn in an SVG canvas. Three elements are shown: two circles and one rectangle, each with distinct fill colors and one with a stroke. The code uses the raw Scalable Vector Graphics (SVG) API directly, defining shapes via XML-like tags such as `<circle>` and `<rect>`. The first circle uses a default fill, while the others specify explicit `fill` and `stroke` attributes, with a misspelled `stroke-navy` attribute also present. All shapes are positioned using static coordinate attributes, and the canvas is rendered in an HTML document.

VVadivel

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to draw basic geometric shapes in SVG. It shows a large, unfilled circle with a thick lime stroke, alongside a red, filled path that forms an angular line. The code uses raw SVG elements, including `circle` and `path`, defined within an HTML `svg` canvas. Several other shapes, such as a rectangle and a line, are present but commented out. The visualization is rendered statically, serving as a fundamental primer on SVG's shape-drawing capabilities.

IIvan Kraev

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape primitives within a static 960-by-500 canvas. It displays a default black circle, a red circle, a yellow rectangle with a navy border, a diagonal navy line, and a stroked path with a missing stroke attribute typo. The code uses the raw SVG API directly inside an HTML document, without any JavaScript libraries or external data sources, relying solely on inline SVG elements and their presentation attributes.

JJMeils

87% match

Loading thumbnail…

SVG first thing

This visualization demonstrates basic SVG shape primitives—a green circle, two thin blue rectangles, a black line, and a blue polyline path—drawn directly in an HTML page. The code uses raw SVG elements with coordinates and stroke properties, including a path with a `d` attribute defining line segments. No external libraries are employed; the rendering relies solely on the browser’s built-in SVG support. The layout shows shapes positioned independently across a 500-pixel-tall canvas, with overlapping strokes and varying fill styles to illustrate core vector graphics capabilities.

JJorge Custodio

86% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes including circles, rectangles, and lines arranged on a 960x500 canvas. The visualization shows how basic geometric primitives are defined with attributes such as position, radius, fill color, and stroke properties. It uses raw SVG markup embedded directly in the HTML, with shapes rendered via the browser’s native SVG API without any additional JavaScript libraries. The code includes a red-filled circle, a green circle, a blue-outlined rectangle with no fill, and a diagonal navy line, illustrating core vector graphics rendering approaches.

RRkossley9090

86% match