Chapter 34: SVG in HTML

SVG Styling with CSS

Vector presentation properties, `currentColor` theming, `vector-effect`, and `stroke-dashoffset` line-drawing animations.

LEARNING OBJECTIVES ⌵

Understand the specificity hierarchy between SVG presentation attributes and author CSS rules.
Master vector stroke styling: stroke, stroke-width, stroke-linecap, and stroke-linejoin.
Implement UI design system theming using currentColor and CSS Custom Properties (var(--token)).
Prevent stroke distortion during scaling using vector-effect="non-scaling-stroke".
Engineer high-performance self-drawing vector animations using stroke-dasharray and stroke-dashoffset.

🎬 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 a mechanical neon sign workshop:

The Glassblower (SVG Markup): Bends the raw hollow glass tubes into precise letters and shapes. This defines the geometry (<path>, <circle>).
The Neon Electrician (CSS Styling): Hooks the glass tubes up to transformers. They inject ionized argon or neon gas to choose the color (fill, stroke), round off the glass caps (stroke-linecap="round"), and adjust the voltage through a dimmer switch (currentColor).
The Current Sequencer (Dashoffset Animation): You pulse an electrical current through the wire from start to finish. The glowing light races through the glass tubing in a fraction of a second, creating the illusion of a signature being drawn in real time.

THE STROKE-DASHOFFSET LINE DRAWING MECHANISM:
  Path Total Length = 100 units

  1. Initial State: stroke-dasharray="100", stroke-dashoffset="100"
     [Invisible Blank Gap: 100 units] ---> (Pen has not drawn yet)

  2. Mid Animation: stroke-dashoffset="50"
     [================ 50% Drawn ================|  50% Hidden  ]

  3. Final State: stroke-dashoffset="0"
     [================ 100% Fully Drawn Line ===================]

Technical Deep Dive & Specifications

1. Presentation Attributes vs. CSS Specificity

In SVG, presentation styling can be applied in two ways:

<!-- Method A: SVG Presentation Attribute -->
<circle cx="50" cy="50" r="40" fill="#3b82f6" stroke="#1d4ed8" />

<!-- Method B: CSS Rule -->
<style>
  circle {
    fill: #10b981; /* OVERRIDES Method A! */
  }
</style>

The Cascade Rule: Presentation attributes on SVG elements operate at the lowest specificity level (equivalent to user-agent default styles). Any author CSS rule in a <style> block or external stylesheet will override presentation attributes without requiring !important.

2. Core SVG CSS Properties Matrix

Property	Values	Description
`fill`	`<color>` \| `url(#gradientId)` \| `none`	Fills the interior geometry enclosed by the path.
`fill-opacity`	`0.0` to `1.0`	Opacity of the interior fill independent of stroke.
`fill-rule`	`nonzero` \| `evenodd`	Algorithm determining which overlapping regions are considered "inside".
`stroke`	`<color>` \| `url(#gradientId)` \| `none`	Paint applied to the outline boundary of the path.
`stroke-width`	`<length>` (e.g. `2px`, `4`)	Thickness of the outline stroke.
`stroke-linecap`	`butt` \| `round` \| `square`	Shape of the endpoints of open subpaths.
`stroke-linejoin`	`miter` \| `round` \| `bevel`	Shape of corners where two path lines intersect.
`stroke-dasharray`	List of numbers (e.g. `10 5 2 5`)	Pattern of alternating dashes and gaps along the stroke.
`stroke-dashoffset`	`<length>` \| `<percentage>`	Distance into the dash pattern where stroke rendering begins.
`vector-effect`	`none` \| `non-scaling-stroke`	Prevents stroke thickness from distorting when the SVG scales up/down.

STROKE-LINECAP COMPARISON:
  butt:    [================]          (Terminates flush at coordinate)
  round:  (================)          (Semicircular cap extending past coordinate)
  square: [|================|]        (Square cap extending past coordinate)

STROKE-LINEJOIN COMPARISON:
  miter:   /\   (Sharp point)
  round:  (  )  (Smooth rounded bend)
  bevel:  /--\  (Chamfered flat edge)

3. The `vector-effect="non-scaling-stroke"` Rule

When you scale an SVG with viewBox="0 0 100 100" up to $1000\text{px} \times 1000\text{px}$, a stroke with stroke-width="2" expands $10\times$ into a thick $20\text{px}$ line.

Setting vector-effect="non-scaling-stroke" instructs the GPU rasterizer to paint the stroke at a constant physical screen pixel width regardless of zoom level or coordinate scaling.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 36–45: Declares @keyframes drawLine that animates stroke-dashoffset from $400$ down to $0$. When applied to .animated-signature (with stroke-dasharray: 400), it creates a continuous self-drawing and erasing line effect.
Line 49–59: Sets up .themed-card with color: #38bdf8. The nested vector elements inherit this value via stroke: currentColor.
Line 98–101: Compares stroke-linecap="round" stroke-linejoin="round" (soft corners) with stroke-linecap="butt" stroke-linejoin="miter" (sharp corners).

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>SVG Styling & Line Drawing FX</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: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      max-width: 900px;
    }

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

svg {
      width: 100%;
      height: 160px;
      margin-top: 1rem;
    }

/* 1. Line Drawing Animation via CSS Keyframes */
    .animated-signature {
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      animation: drawLine 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
    }

@keyframes drawLine {
      to {
        stroke-dashoffset: 0;
      }
    }

/* 2. Theme Switching using currentColor */
    .themed-card {
      color: #38bdf8; /* Default Cyan */
      transition: color 0.3s ease;
    }
    .themed-card:hover {
      color: #ec4899; /* Hover Pink */
    }

.themed-vector {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  </style>
</head>
<body>

<h1>SVG CSS Styling & Line-Drawing Engine</h1>

<div class="gallery">
    
    
    <div class="card">
      <h3>Self-Drawing Wave</h3>
      <p>Keyframed <code>stroke-dashoffset</code></p>
      <svg viewBox="0 0 200 120">
        <path class="animated-signature" 
              d="M 20,60 C 50,10 80,110 110,60 S 170,10 180,60" 
              fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round"/>
      </svg>
    </div>

<div class="card themed-card">
      <h3>currentColor Theming</h3>
      <p>Hover to switch vector color</p>
      <svg viewBox="0 0 200 120">
        <g class="themed-vector">
          <circle cx="100" cy="60" r="40" />
          <path d="M 80,60 L 95,75 L 125,45" />
        </g>
      </svg>
    </div>

<div class="card">
      <h3>Caps & Joins</h3>
      <p>Round vs Miter vs Bevel</p>
      <svg viewBox="0 0 200 120">
        
        <polyline points="30,80 60,30 90,80" fill="none" stroke="#10b981" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
        
        <polyline points="110,80 140,30 170,80" fill="none" stroke="#3b82f6" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter"/>
      </svg>
    </div>

</div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------+
|  1. Self-Drawing Wave     2. currentColor Theme   3. Caps/Joins
|      . - .                    ( ✓ )                   /\   /\ 
|    /       \               (Cyan -> Pink)           (Rnd) (Miter)
|   (Animated Draw)                                             |
+---------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Animated Success Checkmark Badge

Objective: Construct an interactive payment success badge where a circle draws itself first, followed by a checkmark that springs into existence with an animated stroke.

Instructions:

Create an SVG with viewBox="0 0 100 100".
Draw a background outline circle at $(50, 50)$ with radius $40$. (Circumference $C = 2 \times \pi \times 40 \approx 252$).
Draw a checkmark <path d="M 30,50 L 45,65 L 72,38" />. (Length $\approx 60$).
In CSS, configure both paths with fill: none; stroke: #10b981; stroke-width: 5; stroke-linecap: round;.
Animate the circle's stroke-dashoffset from $252 \to 0$ over $0.8\text{s}$.
Animate the checkmark's stroke-dashoffset from $60 \to 0$ starting with a $0.6\text{s}$ delay.

🏁 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>Success Badge Solution</title>
  <style>
    body {
      background: #020617;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem;
    }

    .success-card {
      background: #0f172a;
      border: 1px solid #1e293b;
      border-radius: 16px;
      padding: 2.5rem;
      text-align: center;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    }

    .badge-svg {
      width: 140px;
      height: 140px;
    }

    .base-path {
      fill: none;
      stroke: #10b981;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Circle Animation (Circumference ~ 252) */
    .circle-ring {
      stroke-dasharray: 252;
      stroke-dashoffset: 252;
      transform-origin: center;
      transform: rotate(-90deg); /* Start drawing from top (12 o'clock) */
      animation: drawCircle 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    /* Checkmark Animation (Length ~ 60) */
    .check-mark {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: drawCheck 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
    }

    @keyframes drawCircle {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes drawCheck {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</head>
<body>

  <div class="success-card">
    <svg class="badge-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <!-- Faint Ambient Circle -->
      <circle cx="50" cy="50" r="40" fill="none" stroke="#064e3b" stroke-width="5" />
      
      <!-- Animated Drawing Ring -->
      <circle class="base-path circle-ring" cx="50" cy="50" r="40" />
      
      <!-- Animated Drawing Checkmark -->
      <path class="base-path check-mark" d="M 30,50 L 45,65 L 72,38" />
    </svg>

    <h2 style="margin-top: 1rem; color: #34d399;">Payment Successful!</h2>
    <p style="color: #94a3b8; margin: 0;">Order #84920 has been confirmed.</p>
  </div>

</body>
</html>

Why this works:

The circle's circumference is calculated as $2 \pi r = 2 \times \pi \times 40 \approx 251.32$. Setting stroke-dasharray: 252 and starting at stroke-dashoffset: 252 hides the stroke completely.
Rotating the circle by -90deg ensures the drawing begins at the 12 o'clock top position.
Setting an animation delay of 0.6s on the checkmark causes it to strike downward right as the outer circle finishes forming.

⚠️ Common Pitfalls

Guessing Path Length for Dash Animations: Guessing the length of complex Bézier curves leads to partially clipped lines or awkward pauses. In JavaScript, call pathElement.getTotalLength() to extract the exact mathematical float length.
Strokes Disappearing on Small Screens: When scaling down an SVG without vector-effect="non-scaling-stroke", a $1\text{px}$ stroke scaled down $5\times$ becomes $0.2\text{px}$, disappearing entirely on low-DPI displays.
Attempting to Animate CSS stroke-dashoffset on External <img>: CSS animations applied in the host stylesheet cannot affect SVGs embedded via <img>. The animation must live inline or within the standalone SVG file's internal <style> block.

💡 Pro Tips

Zero-JavaScript Path Length in Modern CSS: In modern CSS Houdini / Path spec, you can set pathLength="1" on your SVG <path> tag (<path pathLength="1" .../>). This normalizes the path's total length to $1.0$, allowing you to write clean, universal CSS: stroke-dasharray: 1; stroke-dashoffset: 1; without calculating geometry!
Theme Tokens with CSS Variables: Pass design tokens directly into inline SVGs:
```
.brand-icon {
  --icon-primary: #3b82f6;
  --icon-secondary: #93c5fd;
}
```
Inside the SVG: <path fill="var(--icon-primary)" stroke="var(--icon-secondary)"/>.

📌 Key Takeaways

Cascade Specificity: Author CSS stylesheets always override inline SVG presentation attributes (fill="...", stroke="...").
currentColor: Enables SVG vectors to inherit the active CSS text color, streamlining multi-theme UI components.
Caps & Joins: stroke-linecap (butt, round, square) and stroke-linejoin (miter, round, bevel) polish line aesthetics.
Line Drawing FX: Animating stroke-dashoffset from the total path length down to 0 creates the signature live vector drawing effect.
non-scaling-stroke: Ensures stroke thickness remains constant regardless of SVG coordinate zoom.
--

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

? Question 1 / 3

What is the CSS specificity priority of an SVG presentation attribute (e.g. `<circle fill="red">`) compared to an author class selector (e.g. `.disc { fill: blue; }`)?

Topic: HTML Fundamentals

? Question 2 / 3

How does the classic SVG line-drawing animation work?

Topic: HTML Fundamentals

? Question 3 / 3

Which SVG property prevents an outline stroke from becoming overly thick or microscopically thin when the parent SVG element is scaled?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. Presentation Attributes vs. CSS Specificity

2. Core SVG CSS Properties Matrix

3. The vector-effect="non-scaling-stroke" Rule

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Animated Success Checkmark Badge

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the CSS specificity priority of an SVG presentation attribute (e.g. <circle fill="red">) compared to an author class selector (e.g. .disc { fill: blue; })?

How does the classic SVG line-drawing animation work?

Which SVG property prevents an outline stroke from becoming overly thick or microscopically thin when the parent SVG element is scaled?

3. The `vector-effect="non-scaling-stroke"` Rule

What is the CSS specificity priority of an SVG presentation attribute (e.g. `<circle fill="red">`) compared to an author class selector (e.g. `.disc { fill: blue; }`)?