Chapter 34: SVG in HTML

SVG Lines and Paths

Mastering vector strokes, `<polyline>`, `<polygon>`, and the complete `<path>` command dictionary from Bézier curves to elliptical arcs.

LEARNING OBJECTIVES ⌵

Implement straight multi-segment vectors using <line>, <polyline>, and <polygon>.
Understand the difference between Absolute (Uppercase) and Relative (Lowercase) <path> commands.
Master the complete SVG <path> command dictionary: M, L, H, V, C, S, Q, T, A, and Z.
Deconstruct complex cubic Bézier curves and elliptical arc parameters (rx ry x-rot large-arc sweep x y).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine programming a robotic vector pen plotter to draw on a sheet of drafting paper:

You lower the pen onto the paper at an exact coordinate $\to$ M (MoveTo).
You glide the pen in a straight line to a new point $\to$ L (LineTo).
You pull two invisible magnetic handles to warp the ink into an organic curve $\to$ C (Cubic Bézier).
You spin an elliptical compass between two anchor points $\to$ A (Elliptical Arc).
You draw a clean straight line back to where you first touched the paper $\to$ Z (ClosePath).

THE PEN PLOTTER COMMAND MODEL:
  M 20,80    -> Pick up pen, move to (20, 80) without drawing
  L 80,20    -> Draw straight line to (80, 20)
  C 90,0 130,0 140,20 -> Draw smooth wave using 2 control handles
  A 30,30 0 0,1 180,80 -> Draw circular arc
  Z          -> Snap straight line back to start (20, 80)

The <path> element is the ultimate Swiss Army Knife of vector graphics. Every shape—from simple triangles and geometric stars to typography fonts and photorealistic character vectors—can be expressed through <path d="...">.

Technical Deep Dive & Specifications

1. Straight-Line Primitives: `<line>`, `<polyline>`, and `<polygon>`

Element	Syntax & Attributes	Behavior
`<line>`	`<line x1="10" y1="10" x2="90" y2="90" stroke="#fff" />`	Draws a single straight line segment between $(x_1, y_1)$ and $(x_2, y_2)$.
`<polyline>`	`<polyline points="10,10 40,60 80,30 120,90" fill="none" stroke="#fff" />`	Connects an open series of coordinate vertices. Does not close the path back to the start.
`<polygon>`	`<polygon points="100,10 40,198 190,78 10,78 160,198" fill="#f59e0b" />`	Connects a series of points and automatically closes the last point back to the first point with a straight line.

2. The Complete `<path>` Command Dictionary

Path data is defined in the d attribute string: <path d="..." />.

The Capitalization Rule:

UPPERCASE commands (M, L, C, A...) = Absolute Coordinates (e.g. L 100 200 means move to absolute coordinate $(100, 200)$ on the canvas).

LOWERCASE commands (m, l, c, a...) = Relative Coordinates (e.g. l 100 200 means move $+100$ units right and $+200$ units down from the current pen location).

+---------------------------------------------------------------------------------------------------+
|                                 THE SVG <path> COMMAND DICTIONARY                                 |
+---------------------------------------------------------------------------------------------------+
  Command      Name                       Parameters                          Function
  ─────────────────────────────────────────────────────────────────────────────────────────────────
  M / m        MoveTo                     (x y)                               Picks up pen; sets new start coordinate
  L / l        LineTo                     (x y)                               Draws straight line to (x, y)
  H / h        Horizontal LineTo          (x)                                 Draws straight horizontal line
  V / v        Vertical LineTo            (y)                                 Draws straight vertical line
  C / c        Cubic Bézier               (x1 y1, x2 y2, x y)                 Draws cubic curve with 2 control points
  S / s        Smooth Cubic Bézier        (x2 y2, x y)                        Reflects previous control point + 1 new point
  Q / q        Quadratic Bézier           (x1 y1, x y)                        Draws quadratic curve with 1 control point
  T / t        Smooth Quadratic Bézier    (x y)                               Reflects previous quadratic control point
  A / a        Elliptical Arc             (rx ry x-rot large-arc sweep x y)   Draws elliptical arc between points
  Z / z        ClosePath                  (none)                              Draws straight line back to start of subpath

3. Understanding Bézier Curves (`C`, `S`, `Q`, `T`)

CUBIC BÉZIER (C x1 y1, x2 y2, x y):         QUADRATIC BÉZIER (Q x1 y1, x y):
       (x1,y1)            (x2,y2)                          (x1,y1) Control
          o                  o                                    o
         /                    \                                 /   \
        /    . - - - - - .     \                               /  . - . \
       * '                 ' *                                * '       ' *
    Start                    End                           Start          End
    (Current Pos)           (x, y)                         (Current Pos)  (x, y)

Cubic Bézier (C): Provides two independent control handles $(x_1, y_1)$ and $(x_2, y_2)$ before terminating at $(x, y)$. This allows $S$-shaped and organic curves.
Smooth Cubic (S): Assumes the first control handle is the direct mirror reflection of the previous curve's second handle, ensuring a continuous smooth derivative.
Quadratic Bézier (Q): Uses a single shared control handle $(x_1, y_1)$ to pull the midpoint into a parabolic arc.

4. Deconstructing the Elliptical Arc Command (`A`)

The Arc command is the most powerful and parameter-dense command in SVG:

$$\text{A } rx\enspace ry\enspace \text{x-axis-rotation}\enspace \text{large-arc-flag}\enspace \text{sweep-flag}\enspace x\enspace y$$

A  30  20    0    0    1    100  150
   ──┬───    ─    ─    ─    ───┬────
     │       │    │    │       └─ End Coordinate (x, y)
     │       │    │    └───────── Sweep Flag: 0 = Anti-clockwise, 1 = Clockwise
     │       │    └────────────── Large Arc Flag: 0 = Shortest arc (≤180°), 1 = Longest arc (>180°)
     │       └─────────────────── X-Axis Rotation: Rotation angle of the ellipse in degrees
     └─────────────────────────── Radii: rx = Horizontal radius, ry = Vertical radius

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 57: <polygon points="100,10 126,68 ..."/> defines a five-pointed star by specifying ten $(x, y)$ coordinate pairs. The browser automatically joins point 10 back to point 1.
Line 72: <path d="M 10,100 C 40,30 70,30 100,100 S 160,170 190,100".../> starts at $(10, 100)$, draws a crest using cubic control points $(40, 30)$ and $(70, 30)$, and uses the smooth command S to draw the mirrored trough to $(190, 100)$.
Line 87: <path d="M 100,100 L 170,100 A 70 70 0 0 0 100,30 Z".../> creates a $90^\circ$ circular pie slice: moves to center $(100, 100)$, lines to $(170, 100)$, draws a $70\text{px}$ radius arc counter-clockwise (sweep=0) to $(100, 30)$, and closes back to center (Z).

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mastering SVG Paths & Geometry</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #090d16;
      color: #f8fafc;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      max-width: 900px;
      width: 100%;
    }

.card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
    }

svg {
      width: 100%;
      height: 180px;
      background: #0f172a;
      border-radius: 8px;
      border: 1px solid #334155;
      margin-top: 1rem;
    }
  </style>
</head>
<body>

<h1>SVG Path & Curve Laboratory</h1>

<div class="gallery">
    
    
    <div class="card">
      <h3>1. Polygon Geometric Star</h3>
      <p>Using <code>&lt;polygon points="..."&gt;</code></p>
      <svg viewBox="0 0 200 200">
        
        <polygon points="100,10 126,68 188,74 141,114 155,176 100,143 45,176 59,114 12,74 74,68" 
                 fill="#f59e0b" stroke="#d97706" stroke-width="2" stroke-linejoin="round"/>
      </svg>
    </div>

<div class="card">
      <h3>2. Cubic Bézier Waves</h3>
      <p>Using <code>C</code> & <code>S</code> commands</p>
      <svg viewBox="0 0 200 200">
        
        <line x1="0" y1="100" x2="200" y2="100" stroke="#334155" stroke-dasharray="4 4"/>
        
        
        <path d="M 10,100 C 40,30 70,30 100,100 S 160,170 190,100" 
              fill="none" stroke="#38bdf8" stroke-width="5" stroke-linecap="round"/>
        
        
        <circle cx="10" cy="100" r="4" fill="#f43f5e"/>
        <circle cx="100" cy="100" r="4" fill="#f43f5e"/>
        <circle cx="190" cy="100" r="4" fill="#f43f5e"/>
      </svg>
    </div>

<div class="card">
      <h3>3. Elliptical Arc Wedge</h3>
      <p>Using <code>M, L, A, Z</code> commands</p>
      <svg viewBox="0 0 200 200">
        
        <path d="M 100,100 L 170,100 A 70 70 0 0 0 100,30 Z" 
              fill="#10b981" stroke="#34d399" stroke-width="2"/>
        
        
        <path d="M 100,100 L 100,30 A 70 70 0 1 0 170,100 Z" 
              fill="#6366f1" stroke="#818cf8" stroke-width="2" opacity="0.8"/>
      </svg>
    </div>

</div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------+
|  1. Geometric Star       2. Bézier Wave        3. Arc Wedge   |
|         /\                   . - .                  /|        |
|     /--/  \--\             /       \               / | Arc    |
|       \    /              *---------*             +--+        |
|       /    \                       \        /     (Pie Slice) |
|      /--/\--\                       ' - - '                   |
+---------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Hand-Craft a Weather Cloud & Lightning Icon

Objective: Hand-craft an authentic SVG weather icon using pure <path d="..."> command strings without external graphics editors.

Instructions:

Create an SVG with viewBox="0 0 200 200".
Construct the cloud body path using:
- M 50,130 (Start at bottom-left base)
- H 150 (Draw flat bottom line to $X=150$)
- A 25 25 0 0 0 160,85 (Draw right cloud puff arc)
- A 35 35 0 0 0 105,65 (Draw top main cloud puff arc)
- A 25 25 0 0 0 50,130 (Draw left cloud puff arc)
- Z (Close path)
Underneath the cloud, draw a sharp zigzag lightning bolt using <polygon points="95,140 115,140 100,165 120,165 85,195 95,170 80,170" fill="#facc15"/>.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather Cloud Solution</title>
  <style>
    body {
      background: #020617;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem;
    }

    .card {
      background: #0f172a;
      padding: 2rem;
      border-radius: 16px;
      border: 1px solid #1e293b;
      text-align: center;
    }

    .weather-svg {
      width: 240px;
      height: 240px;
      filter: drop-shadow(0 10px 20px rgba(14, 165, 233, 0.25));
    }
  </style>
</head>
<body>

  <div class="card">
    <h2>Storm Cloud Vector Asset</h2>

    <svg class="weather-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      
      <!-- Ambient Glow Behind Cloud -->
      <circle cx="100" cy="90" r="50" fill="#38bdf8" opacity="0.15" />

      <!-- Hand-Crafted Arc Cloud -->
      <path d="M 50 130 H 150 A 25 25 0 0 0 160 85 A 35 35 0 0 0 105 65 A 25 25 0 0 0 50 130 Z" 
            fill="#e2e8f0" stroke="#cbd5e1" stroke-width="3" stroke-linejoin="round" />

      <!-- Hand-Crafted Lightning Polygon -->
      <polygon points="95,135 115,135 100,160 120,160 85,192 95,168 80,168" 
               fill="#facc15" stroke="#eab308" stroke-width="1.5" stroke-linejoin="round" />

    </svg>
  </div>

</body>
</html>

Why this works:

M 50 130 establishes the bottom-left baseline.
H 150 executes an absolute horizontal rule straight across the bottom of the cloud.
Three successive A (Elliptical Arc) commands curve outward around $(160, 85)$, $(105, 65)$, and $(50, 130)$ using the small arc flag 0 and sweep flag 0 (counter-clockwise curvature), creating three organic cloud lobes.
Z cleanly seals the bottom-left junction.

⚠️ Common Pitfalls

Mixing up Uppercase vs Lowercase Commands: Writing l 50 50 (relative: move $+50\text{px}$ from current position) when you intended L 50 50 (absolute: jump to canvas coordinate $50, 50$) is the #1 cause of broken vector path rendering.
Arc Flag Confusion (large-arc & sweep): If your arc bulges inward instead of outward, flip the sweep-flag between 0 and 1. If your arc takes the long way around ($>180^\circ$) instead of the short route, toggle the large-arc-flag from 1 to 0.
Unclosed Polyline Fills: <polyline> does not automatically join the last point to the start. If you add a fill to a <polyline>, the browser fills the interior, but the stroke border remains open. Use <polygon> or <path ... Z> if you need a fully closed stroke boundary.

💡 Pro Tips

Path Minification (Omission of Redundant Command Letters): In SVG path syntax, if multiple consecutive segments use the same command, you can omit the repeated letter. For example, L 10 20 L 30 40 L 50 60 can be condensed to L 10 20 30 40 50 60.
The H and V Optimization: Whenever a line is strictly horizontal or vertical, replace L 150 50 with H 150 (if only $X$ changes) or V 50 (if only $Y$ changes). This shaves bytes off your SVG payload.

📌 Key Takeaways

<line>, <polyline>, <polygon>: Primitives for straight lines; <polygon> automatically closes the perimeter, while <polyline> remains an open stroke.
Case Sensitivity: Uppercase letters (M, L, C, A) operate on Absolute canvas coordinates; lowercase letters (m, l, c, a) operate on Relative deltas.
Cubic Béziers (C): Form curves using two control handles $(x_1, y_1)$ and $(x_2, y_2)$ before the destination $(x, y)$.
Elliptical Arcs (A): Require 7 arguments: $rx, ry$, X-rotation, large-arc-flag, sweep-flag, and destination $x, y$.
Z: Always draws a straight connecting stroke back to the beginning of the current subpath.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What is the difference between `L 50 100` and `l 50 100` in an SVG `<path>` definition?

Topic: HTML Fundamentals

? Question 2 / 3

Which path command terminates the current subpath by drawing a straight line back to the initial `M` coordinate?

Topic: HTML Fundamentals

? Question 3 / 3

In the arc command `A rx ry x-rot large-arc sweep x y`, what does setting `sweep-flag = 1` specify?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. Straight-Line Primitives: <line>, <polyline>, and <polygon>

2. The Complete <path> Command Dictionary

3. Understanding Bézier Curves (C, S, Q, T)

4. Deconstructing the Elliptical Arc Command (A)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Hand-Craft a Weather Cloud & Lightning Icon

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the difference between L 50 100 and l 50 100 in an SVG <path> definition?

Which path command terminates the current subpath by drawing a straight line back to the initial M coordinate?

In the arc command A rx ry x-rot large-arc sweep x y, what does setting sweep-flag = 1 specify?

1. Straight-Line Primitives: `<line>`, `<polyline>`, and `<polygon>`

2. The Complete `<path>` Command Dictionary

3. Understanding Bézier Curves (`C`, `S`, `Q`, `T`)

4. Deconstructing the Elliptical Arc Command (`A`)

What is the difference between `L 50 100` and `l 50 100` in an SVG `<path>` definition?

Which path command terminates the current subpath by drawing a straight line back to the initial `M` coordinate?

In the arc command `A rx ry x-rot large-arc sweep x y`, what does setting `sweep-flag = 1` specify?