STEP 3: Basic Shapes and the `<path>` Tag

In the previous step, we figured out the "canvas" (viewBox). Now it's time to pick up the tools and start drawing. Although SVG allows you to create rectangles and circles with a single line of code, the real magic begins where standard shapes end. In this article, we'll quickly go over the primitives you'll see often, and then move on to the "heart" of vector graphics - the <path> tag, which allows you to draw absolutely anything.

Part 1: Simple Primitives (Geometry for the Lazy)

SVG provides a set of ready-made shapes. They are convenient, readable, and easy to edit manually.

1. Lines and Polylines (`<line>`, `<polyline>`)

Sometimes you just need to draw a line.

<line> is a straight line segment between two points. Be sure to set the stroke (outline color), otherwise the line will not be visible.

<polyline> is a "broken" line. It consists of a series of straight line segments.

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Simple line -->
  <line x1="10" y1="10" x2="190" y2="10" stroke="black" stroke-width="2"/>
</svg>

Output:

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Polyline (graph, zigzag) -->
  <polyline points="10,40 40,80 80,30 120,80 190,40" 
            fill="none" stroke="blue" stroke-width="2"/>
</svg>

Output:

Important: By default, <polyline> has a fill (fill). If you are drawing a graph, do not forget to put fill="none", otherwise SVG will try to fill the space between the line and an imaginary straight line connecting the ends.

2. Polygon (`<polygon>`)

This is the twin brother of <polyline>, but with one difference: it always closes. SVG automatically connects the last point to the first. Ideal for triangles, stars and hexagons.

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- Triangle -->
  <polygon points="50,10 90,90 10,90" 
           fill="coral" stroke="maroon" stroke-width="2"/>
</svg>

Output:

Part 2: `<path>` - The King of SVG

All the tags above (rect, circle, polygon) are just "sugar". Under the hood, the browser still turns them into paths. The <path> tag is a universal tool, a pen that you draw on the canvas with.

The <path> tag has one main attribute - d (data or draw). A set of commands is written inside it.

Imagine that you are controlling a robot arm with a pencil. You give it commands:

M (Move to) - Pick up your hand and move to point X, Y (without drawing).
L (Line to) - Lower the pencil and draw a straight line to point X, Y.
Z (Close path) - Close the path (draw a line to the beginning).

Example: Drawing a rectangle manually

<svg width="150" height="150" viewBox="0 0 150 150">
  <!-- 
    M 10 10 - Move to point 10,10
    L 100 10 - Line to the right
    L 100 100 - Line down
    L 10 100 - Line to the left
    Z - Close (return to 10,10)
  -->
  <path d="M 10 10 L 100 10 L 100 100 L 10 100 Z" 
        fill="none" stroke="black" stroke-width="2"/>
</svg>

Output:

Pro-Tip: Case matters!

Uppercase letters (M, L): Absolute coordinates (go to point x=100).
Lowercase letters (m, l): Relative coordinates (move 100 pixels from the current point).

Part 3: Bezier Curves (The Hardest Part)

Straight lines are boring. All the beauty of graphics is in the curves. In SVG, curves are built using Bezier curves.

The logic is this: there is a starting point, a finishing point, and a control point (a magnet) that "pulls" the line towards itself, bending it.

1. Quadratic curve (Command Q)

The simplest curve. It has only one control point.

Syntax: Q x1 y1 x y

x1 y1 - coordinates of the magnet (control point).
x y - where the line should come.

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- The line goes from 10,90 to 190,90. 
       But the point 100,10 (top center) pulls it up like a rubber band -->
  <path d="M 10 90 Q 100 10 190 90" 
        fill="none" stroke="red" stroke-width="4"/>
  
  <!-- Visualization of the control point (for understanding) -->
  <circle cx="100" cy="10" r="3" fill="red" />
  <line x1="10" y1="90" x2="100" y2="10" stroke="#ddd" />
  <line x1="190" y1="90" x2="100" y2="10" stroke="#ddd" />
</svg>

Output:

2. Cubic curve

This is what is used in 99% of complex graphics. There are two magnets here: one pulls the line from the start, the other directs it to the finish.

Syntax: C x1 y1 x2 y2 x y

x1 y1 - the first magnet (controls the start).
x2 y2 - the second magnet (controls the finish).
x y - the end point.

It is with the help of C that complex shapes are drawn, for example, a heart:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M 50,80 
           C 30,70 10,50 10,35 
           C 10,20 20,10 30,10 
           C 40,10 50,20 50,30 
           C 50,20 60,10 70,10 
           C 80,10 90,20 90,35 
           C 90,50 70,70 50,80 Z" 
        fill="crimson"/>
</svg>

Output:

Part 4: The Real World (Figma/Illustrator and SVG)

You are unlikely to have to write complex paths by hand (except for simple icons or animations). You usually draw in a graphics editor.

How it works:

You place points and pull the "handles" in Figma.
These "handles" are the coordinates x1, y1 and x2, y2 for the C or Q commands.
When exporting, the editor translates your drawing into one long string of the d attribute.

Why is this important for a developer to know?

Often editors export "dirty" code. By understanding the syntax, you can:

See extra points and remove them.
Round values (write 10 instead of 10.000034), reducing the file weight.
Change the direction of the curve for animation.

Final example: "House by the sea"

Let's put it all together. We use primitives for simple shapes, and <path> for waves.

<svg width="300" height="200" viewBox="0 0 300 200" style="border:1px solid #ccc">
  
  <!-- Sky (Rect) -->
  <rect width="300" height="200" fill="#87CEEB"/>
  
  <!-- Sun (Circle) -->
  <circle cx="250" cy="40" r="30" fill="#FFD700" />

  <!-- House (Group + Polyline + Rect) -->
  <g transform="translate(20, 80)">
    <rect x="20" y="40" width="60" height="60" fill="white"/>
    <polygon points="20,40 50,10 80,40" fill="#A52A2A"/>
    <rect x="45" y="70" width="20" height="30" fill="#654321"/>
  </g>
  
  <!-- Sea (Path with Bezier curves) 
       We use Q to create smooth waves
  -->
  <path d="M 0 160 
           Q 50 140 100 160 
           T 200 160 
           T 300 160 
           V 200 H 0 Z" 
        fill="#1E90FF" opacity="0.8"/>
        
  <!-- Text -->
  <text x="150" y="190" text-anchor="middle" fill="white" font-family="Arial" font-size="12">
    SVG Landscape
  </text>
</svg>

Output:

(Note the T command in the sea code - this is a "continuation" of the previous quadratic curve, a shortcut for smooth lines).

You will be able to take a video course on creating svg graphics in Inkscape when it is ready

Svg Course Basics Shapes

STEP 3: Basic Shapes and the `<path>` Tag

Part 1: Simple Primitives (Geometry for the Lazy)

1. Lines and Polylines (`<line>`, `<polyline>`)

2. Polygon (`<polygon>`)

Part 2: `<path>` - The King of SVG

Example: Drawing a rectangle manually

Part 3: Bezier Curves (The Hardest Part)

1. Quadratic curve (Command Q)

2. Cubic curve

Part 4: The Real World (Figma/Illustrator and SVG)

How it works:

Why is this important for a developer to know?

Final example: "House by the sea"

Check what you learned

Svg Course Basics Shapes

STEP 3: Basic Shapes and the <path> Tag

Part 1: Simple Primitives (Geometry for the Lazy)

1. Lines and Polylines (<line>, <polyline>)

2. Polygon (<polygon>)

Part 2: <path> - The King of SVG

Example: Drawing a rectangle manually

Part 3: Bezier Curves (The Hardest Part)

1. Quadratic curve (Command Q)

2. Cubic curve

Part 4: The Real World (Figma/Illustrator and SVG)

How it works:

Why is this important for a developer to know?

Final example: "House by the sea"

Check what you learned

STEP 3: Basic Shapes and the `<path>` Tag

1. Lines and Polylines (`<line>`, `<polyline>`)

2. Polygon (`<polygon>`)

Part 2: `<path>` - The King of SVG