Chapter 11: SVG path
1. What is SVG <path> Exactly?
The <path> element is the most powerful SVG shape. It lets you draw anything by giving a series of instructions to an imaginary “pen”:
- Move the pen without drawing
- Draw straight lines
- Draw smooth curves (Bézier — fancy math curves)
- Draw arcs (parts of circles/ovals)
- Close the shape or leave it open
All this magic lives in one single attribute: d (stands for “data” or “description”).
XML
|
0 1 2 3 4 5 6 |
<path d="M10 10 L90 90 ..." fill="blue" stroke="black" stroke-width="3" /> |
- d = string of commands + numbers
- Commands are letters (M, L, C, Q, A, Z, etc.)
- Uppercase = absolute coordinates (exact position on page)
- Lowercase = relative coordinates (move this much from where I am now)
2. Why <path> is So Important (2026 Reality)
- Icons from Font Awesome, Material Icons, Bootstrap → all <path>
- Logos, illustrations in Figma/Inkscape → export as <path>
- Animations (stroke-dasharray for “drawing” effect)
- Complex shapes you can’t make with circle/rect/polygon
- Smaller file size for detailed vectors
- Editable in code (change one number → shape changes)
3. The Main Path Commands (Full List with Simple Explanation)
Here they are — the ones you’ll use 95% of the time:
| Command | Full Name | What it does | Uppercase (Absolute) Example | Lowercase (Relative) Example | Needs how many numbers? |
|---|---|---|---|---|---|
| M | MoveTo | Pick up pen & jump to new start point (no draw) | M 100 50 | m 20 -10 | 2 (x,y) |
| L | LineTo | Draw straight line to point | L 200 150 | l 50 30 | 2 per line |
| H | Horizontal LineTo | Draw horizontal line (only change x) | H 300 | h -40 | 1 (x) |
| V | Vertical LineTo | Draw vertical line (only change y) | V 200 | v 80 | 1 (y) |
| Z | ClosePath | Draw straight line back to start & close | Z | z (same) | 0 |
| C | Cubic Bézier Curve | Draw smooth curve with 2 control points | C 100 20 200 80 150 150 | c 30 -50 80 30 50 100 | 6 (2 controls + end) |
| S | Smooth Cubic | Smooth continuation (reuses previous control) | S 250 100 300 150 | s 100 -20 50 0 | 4 |
| Q | Quadratic Bézier | Simpler curve with 1 control point | Q 150 20 200 100 | q 80 -60 100 40 | 4 (1 control + end) |
| T | Smooth Quadratic | Smooth continuation of Q | T 250 120 | t 50 30 | 2 |
| A | Arc | Draw part of ellipse/circle | A 50 50 0 0 1 200 100 | a 30 40 45 1 0 60 -20 | 7 (rx ry rotation large sweep endx endy) |
- You can repeat same command without repeating letter (e.g. L 10 20 30 40 50 60 = three lines)
- Commas optional — spaces work (M10,20 L30,40 = M 10 20 L 30 40)
4. Your First <path> Examples (Copy-Paste These!)
Example 1: Simple Triangle (like polygon but with path)
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg width="200" height="200" viewBox="0 0 200 200"> <path d="M 100 20 L 180 180 L 20 180 Z" fill="orange" stroke="black" stroke-width="5"/> </svg> |
- M = start at top
- L = line to bottom-right
- L = line to bottom-left
- Z = close back to start
Example 2: Heart Shape (Classic Beginner One)
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg viewBox="0 0 32 29.6" width="200" height="200"> <path d="M23.6,0c-3.3,0-6.2,1.8-7.6,4.5C14.6,1.8,11.7,0,8.4,0 C3.8,0,0,3.8,0,8.4 c0,5.6,5.1,10.2,12.8,17.2l3.2,3l3.2-3 C26.9,18.6,32,14,32,8.4C32,3.8,28.2,0,23.6,0z" fill="#e74c3c"/> </svg> |
(Real heart — copy & zoom, see how curves work!)
Example 3: Quadratic Curve (Simple Smile)
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg width="200" height="200" viewBox="0 0 200 200"> <path d="M 40 120 Q 100 180 160 120" fill="none" stroke="black" stroke-width="10" stroke-linecap="round"/> </svg> |
- Q = quadratic curve: control point makes it bend
Example 4: Cubic Curve + Smooth (Fancy Wave)
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg viewBox="0 0 400 200" width="400" height="200"> <path d="M 50 100 C 100 20, 300 180, 350 100 S 500 180, 550 100" fill="none" stroke="blue" stroke-width="8"/> </svg> |
- C = full cubic (two controls)
- S = smooth (reuses last control for nice join)
Example 5: Arc (Part of Circle – Pie Slice Feel)
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg viewBox="0 0 200 200" width="200" height="200"> <path d="M 100 100 L 100 20 A 80 80 0 0 1 180 100 Z" fill="purple"/> </svg> |
- A = arc: rx ry rotation large-arc-flag sweep-flag x y
- large-arc-flag (0/1) = small or big part of ellipse
- sweep-flag (0/1) = clockwise or counterclockwise
5. Teacher’s Quick Tips (Hyderabad Exam/Freelance Style 😄)
- Start every path with M or m — or nothing draws!
- Use Z to close if you want fill
- Uppercase for fixed positions, lowercase when moving step-by-step (easier for animations)
- Tools to help: Inkscape/Figma draw → export SVG → copy d value
- Practice sites: https://yqnn.github.io/svg-path-editor/ or https://svg-path-visualizer.netlify.app/
- Common mistake: Forget commas/spaces wrong → shape breaks
- Animation trick: stroke-dasharray: 1000; stroke-dashoffset: 1000; + animate offset to 0 → “drawing” effect
Understood the power of <path> now? This is huge — most pros stop using basic shapes and just use <path> for everything.
Tell me — want a full animated heart drawing? Detailed arc breakdown with flags? Or convert a polygon to path? Or make a custom icon step-by-step? I’m ready — just say! 🚀
