SVG Fundamentals
Text-based data formats are widely used to store, describe, and exchange structured information between software systems. Formats such as SVG represent data using plain text, making them readable by both humans and machines while remaining platform-independent. Each format organizes information in a different way. SVG organizes graphical content in a hierarchical structure, where each element represents a visual object (such as a rectangle, circle, or path) and can contain styling, positioning, and transformation data. Understanding these formats helps developers and engineers design interoperable systems, automate workflows, and reliably transfer structured data across different applications and technologies.
-
Chapter 1 — Basics of SVG
-
Lesson 1.1 – What is SVG
SVG (Scalable Vector Graphics) is an XML-based format used to describe 2D graphics. It is resolution-independent and ideal for web graphics.
-
Lesson 1.2 –SVG Canvas
The <svg> element defines the drawing area (canvas). You control size using width and height.
-
Lesson 1.3 – Basic Shapes
SVG provides simple elements like rectangles, circles, and lines to create graphics.
-
-
Chapter 2 — Working with Elements
-
Lesson 2.1 – Positioning
Shapes are placed using coordinates. Each element has attributes like x, y, cx, cy.
-
Lesson 2.2 – Styling (Fill & Stroke)
You can style shapes using fill, stroke, and stroke-width.
-
Lesson 2.3 – Grouping Elements
The <g> element groups shapes so they share styles or transformations.
-
-
Chapter 3 — CSV Advanced Basics
-
Lesson 3.1 – Text in SVG
SVG can display text using the <text> element with position and styling.
-
Lesson 3.2 – Paths
Paths allow drawing complex shapes using commands like M (move) and L (line).
-
Lesson 3.3 – Combining Elements
Multiple SVG elements can be combined to create structured visuals (like simple data displays).
-