Ep. 1 - SVG Basics - MK

SVG Fundamentals

This example demonstrates fundamental SVG shapes in a single static graphic, including a circle, a red-filled circle, an outlined blue rectangle, a thick black line, and a polyline path. It shows how the basic geometric elements—circle, rect, line, and path—are defined with coordinates and styling attributes such as fill, stroke, and stroke-width. The rendering uses inline SVG within an HTML document, with no external libraries or data sources. The code illustrates manual layout by specifying each element’s position, size, and appearance directly in the markup.

Jjmetzg11alpine

SVG Fundamentals

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.

MMark Heo

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered directly in an HTML document. It shows how SVG elements create basic visual marks with varying fill and stroke properties, including a filled circle, an outlined circle with a blue stroke, a yellow rectangle with a thick navy border, and a simple polyline path. The code uses plain SVG markup with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for the path, with no external libraries or data sources. The rendering approach is static inline SVG within a 960×500 viewport.

Wwindwaver

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, and a line—positioned on a 900-by-450 pixel canvas with a visible black border. The circle is stroked with blue and unfilled, the rectangle is filled green with a blue outline, and the diagonal line is drawn in red. The code uses raw SVG markup embedded directly in an HTML document, specifying coordinates, dimensions, and colors via attributes like `cx`, `cy`, `r`, `width`, `height`, and `stroke-width`. No JavaScript libraries are employed; all rendering is handled natively by the browser's SVG engine.

AAshwani Sajwan

SVG Fundamentals

This example demonstrates basic SVG shapes, including a circle, rectangle, line, and path, as rendered directly in an inline `<svg>` element. It shows how each shape’s attributes—such as `cx`, `cy`, `r` for the circle, and `x`, `y`, `width`, `height`, `fill`, `stroke`, and `stroke-width` for the rectangle—control its geometry and styling. The code uses raw SVG APIs without any JavaScript libraries, with styles applied via presentation attributes. The path element draws a polyline using the `d` attribute’s `M` and `L` commands, illustrating coordinate-based drawing.

Kktshim@snu.ac.kr

MMadhu Dheeraj Maddiletigari

SVG Fundamentals

This example demonstrates basic SVG shapes rendered directly in HTML, showing circles, a rectangle, and a line with various colors and stroke settings. The code uses native SVG elements such as `<circle>`, `<rect>`, and `<line>`, each with attributes like `cx`, `cy`, `r`, `width`, `height`, `stroke`, and `stroke-width`. No JavaScript libraries or data sources are involved; the rendering relies entirely on SVG markup within a fixed 960×500 canvas. The visual output highlights fundamental shape primitives and styling properties without interaction or animation.

SVG Fundamentals

This SVG Fundamentals example demonstrates basic vector graphics shapes including circles, rectangles, lines, and paths rendered directly in HTML5. The blue-stroked rectangular frame and colorful geometric elements showcase core SVG attributes such as fill, stroke, stroke-width, and path commands like elliptical arcs (A) and quadratic Bézier curves (Q). The markup is hand-written SVG, not generated by a JavaScript library, with a minimal accompanying stylesheet and a console.log statement in index.js.

AAalimujiang@gmail.com

SVG Fundamentals

This example introduces fundamental SVG shapes—a circle, a filled circle, a stroked rectangle, and a line—drawn directly in an inline SVG element with a fixed 960 by 500 viewport. It shows how SVG attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` control geometry and styling. The code uses no JavaScript libraries, relying purely on raw SVG markup within an HTML page. It demonstrates the basic building blocks for creating vector graphics in the browser.

Aalexaviz