Chapter 34: SVG in HTML

Basic SVG Shapes

Mastering geometric primitives: `<rect>`, `<circle>`, `<ellipse>`, corner radii mathematics, and coordinate origin behaviors.

LEARNING OBJECTIVES ⌵

Understand the coordinate positioning rules for <rect> (top-left) vs. <circle> and <ellipse> (center origin).
Master rounded rectangle corner curvature using the rx and ry radius attributes and radius clamping mechanics.
Construct complex geometric UI components using nested <g> (group) containers.
Implement pill/capsule shapes, concentric rings, and orbital ellipses purely with geometric primitives.

🎬 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 draftsman seated at an architectural drafting board equipped with three precision tools:

The T-Square & Set Square (<rect>): You place the corner of the ruler at a precise point on the drafting paper $(X, Y)$ and measure outward: $W$ units across and $H$ units down. If you swap the hard corner for a curve template, you round off the edges ($rx, ry$).
The Compass (<circle>): You press the metal needle point firmly into the center of the paper $(cx, cy)$ and spin the graphite pencil $r$ units away in a full 360-degree sweep.
The Elliptical Stencil (<ellipse>): You align the center crosshair $(cx, cy)$, but instead of equal radius, you stretch the horizontal radius $rx$ wider than the vertical radius $ry$, producing a stadium oval or planetary ring.

<rect x="50" y="50" w="100" h="60">       <circle cx="100" cy="80" r="40">       <ellipse cx="100" cy="80" rx="60" ry="30">
(50,50) Origin                           (cx,cy) Center Origin                  (cx,cy) Center Origin
  +-------------+                                . - - - .                              . - - - - - - .
  |             |                            '       |       '                      '        |        '
  |             |                          |      (cx,cy)----|-- r = 40           |      (cx,cy)-------|-- rx = 60
  |             |                            '       |       '                      '        |        '
  +-------------+                                ' - - - '                              ' - - - - - - '
                                                                                             | ry = 30

Notice the critical conceptual distinction: Rectangles position from their top-left corner $(x, y)$, while circles and ellipses position from their mathematical center $(cx, cy)$.

Technical Deep Dive & Specifications

1. The `<rect>` Element (Rectangles & Rounded Boxes)

The <rect> element defines a rectangle aligned with the current coordinate plane.

<rect x="20" y="30" width="200" height="100" rx="15" ry="15" fill="#3b82f6" />

Attribute Specification Matrix:

Attribute	Type	Default	Description
`x`	`<length>`	`0`	The X coordinate of the left edge of the rectangle.
`y`	`<length>`	`0`	The Y coordinate of the top edge of the rectangle.
`width`	`<length>`	`0`	Width of the rectangle (values $\le 0$ disable rendering).
`height`	`<length>`	`0`	Height of the rectangle (values $\le 0$ disable rendering).
`rx`	`<length>`	`auto`	Horizontal corner radius. If only `rx` is provided, `ry` automatically inherits `rx`.
`ry`	`<length>`	`auto`	Vertical corner radius. If only `ry` is provided, `rx` automatically inherits `ry`.

Corner Radius Clamping Rule:

According to the W3C SVG 2 Specification, the browser automatically clamps corner radii so that: $$\text{Clamped } rx = \min\left(rx, \frac{\text{width}}{2}\right), \quad \text{Clamped } ry = \min\left(ry, \frac{\text{height}}{2}\right)$$ Setting rx="50%" or rx="9999" on a rectangle creates a perfect pill / stadium capsule shape without manual pixel calculations.

2. The `<circle>` Element (Equidistant Geometry)

The <circle> element defines a circle based on a single center point and a uniform radial distance.

<circle cx="100" cy="100" r="50" fill="#10b981" stroke="#059669" stroke-width="4" />

Attribute	Type	Default	Description
`cx`	`<length>`	`0`	Center X coordinate.
`cy`	`<length>`	`0`	Center Y coordinate.
`r`	`<length>`	`0`	Radius distance from center (values $\le 0$ disable rendering).

3. The `<ellipse>` Element (Bi-Axial Curves)

The <ellipse> element defines an ellipse with independent horizontal and vertical radii.

<ellipse cx="150" cy="100" rx="80" ry="40" fill="#8b5cf6" />

Attribute	Type	Default	Description
`cx`	`<length>`	`0`	Center X coordinate.
`cy`	`<length>`	`0`	Center Y coordinate.
`rx`	`<length>`	`0`	Semi-major horizontal radius.
`ry`	`<length>`	`0`	Semi-minor vertical radius.

4. Semantic Grouping with `<g>`

The <g> (group) element acts as a non-rendering structural container (analogous to a <div> in HTML) used to:

Apply collective transformations: transform="translate(100, 50) rotate(45)".
Inherit styles: Attributes placed on <g> (like fill="#ffffff" or stroke-width="2") cascade down to all child shapes.
Structure DOM nodes: Enables clean organization and screen reader semantics.

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 57–63: <g id="rectangles"...> groups rectangles together. The pill rectangle uses rx="25" which equals exactly half its height ($50 / 2 = 25$), creating perfectly semicircular rounded caps on both ends.
Line 66–71: <g id="target-circles"> stacks concentric circles by sharing the same center coordinates cx="270" cy="110", with decreasing radii ($r = 70, 50, 30, 10$).
Line 74–82: Demonstrates group translation: <g id="planetary-system" transform="translate(460, 110)"> shifts the local origin $(0, 0)$ to coordinate $(460, 110)$. The planetary ellipse <ellipse cx="0" cy="0" rx="90" ry="30"/> is defined cleanly around its local center.

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>Basic SVG Shapes Showcase</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #0b0f19;
      color: #f1f5f9;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.canvas-card {
      background: #1e293b;
      padding: 2rem;
      border-radius: 12px;
      border: 1px solid #334155;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }

svg {
      background: #0f172a;
      border-radius: 8px;
      border: 1px solid #334155;
    }

/* Hover interactions on basic shapes */
    .shape-interactive {
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .shape-interactive:hover {
      opacity: 0.85;
      filter: drop-shadow(0 0 12px currentColor);
    }
  </style>
</head>
<body>

<div class="canvas-card">
    <h2>SVG Geometric Primitives Gallery</h2>
    <p>Demonstrating <code>&lt;rect&gt;</code>, <code>&lt;circle&gt;</code>, <code>&lt;ellipse&gt;</code>, and <code>&lt;g&gt;</code> groups:</p>

<g id="target-circles">
        <circle cx="270" cy="110" r="70" fill="#1e293b" stroke="#f43f5e" stroke-width="4"/>
        <circle cx="270" cy="110" r="50" fill="#334155" stroke="#fb7185" stroke-width="3"/>
        <circle cx="270" cy="110" r="30" fill="#f43f5e" stroke="#ffe4e6" stroke-width="2" class="shape-interactive" color="#f43f5e"/>
        <circle cx="270" cy="110" r="10" fill="#ffffff"/>
      </g>

<g id="planetary-system" transform="translate(460, 110)">
        
        <ellipse cx="0" cy="0" rx="90" ry="30" fill="none" stroke="#a855f7" stroke-width="3" stroke-dasharray="6 4"/>
        
        
        <circle cx="0" cy="0" r="35" fill="#eab308" stroke="#fde047" stroke-width="3" class="shape-interactive" color="#eab308"/>
        
        
        <circle cx="70" cy="-18" r="12" fill="#38bdf8" stroke="#7dd3fc" stroke-width="2"/>
      </g>

<text x="90" y="105" fill="#ffffff" font-size="12" text-anchor="middle" font-weight="bold">rect (rx=0)</text>
      <text x="90" y="180" fill="#0f172a" font-size="12" text-anchor="middle" font-weight="bold">pill (rx=25)</text>
      <text x="270" y="210" fill="#94a3b8" font-size="12" text-anchor="middle">circle (cx, cy, r)</text>
      <text x="460" y="210" fill="#94a3b8" font-size="12" text-anchor="middle">ellipse (rx=90, ry=30)</text>

</svg>
  </div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------+
|  SVG Geometric Primitives Gallery                             |
|                                                               |
|  [Sharp Rect]         ( ( ( O ) ) )        \   (Planet)   /   |
|  (Pill Capsule)      Concentric Target       \ (Orbit)  /     |
|                                                (Ellipse)      |
+---------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Construct a Space Exploration Mission Patch

Objective: Hand-craft an SVG space mission emblem using ONLY <rect>, <circle>, <ellipse>, and <g> tags.

Instructions:

Create an SVG with viewBox="0 0 200 200".
Draw an outer dark emblem shield using a rounded rectangle (<rect>) with width="180" height="180" x="10" y="10" rx="30".
Place a deep space portal circle at center $(100, 100)$ with radius $65$.
Add a tilted planet inside the portal with center $(100, 100)$, radius $25$, and an orbital ellipse ring with rx="55" and ry="14".
Group the planet and its orbital ring inside a <g transform="rotate(-25 100 100)"> to create an authentic 25-degree orbital tilt!

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

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

    .patch-svg {
      width: 280px;
      height: 280px;
      filter: drop-shadow(0 10px 15px rgba(56, 189, 248, 0.2));
    }
  </style>
</head>
<body>

  <div class="patch-card">
    <h2>AstroLab Orbit Patch</h2>
    
    <svg class="patch-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      
      <!-- 1. Outer Emblem Badge -->
      <rect x="10" y="10" width="180" height="180" rx="35" fill="#1e1b4b" stroke="#6366f1" stroke-width="4"/>
      
      <!-- 2. Decorative Border Inset -->
      <rect x="18" y="18" width="164" height="164" rx="27" fill="none" stroke="#4338ca" stroke-width="1.5" stroke-dasharray="6 4"/>
      
      <!-- 3. Celestial Viewport Circle -->
      <circle cx="100" cy="100" r="65" fill="#090d16" stroke="#312e81" stroke-width="3"/>
      
      <!-- 4. Background Stars -->
      <circle cx="65" cy="70" r="1.5" fill="#ffffff"/>
      <circle cx="140" cy="65" r="2" fill="#ffffff" opacity="0.8"/>
      <circle cx="75" cy="135" r="1.5" fill="#ffffff" opacity="0.6"/>
      <circle cx="130" cy="130" r="2" fill="#ffffff"/>

      <!-- 5. Tilted Planetary System -->
      <g transform="rotate(-25 100 100)">
        <!-- Back Ring Segment -->
        <ellipse cx="100" cy="100" rx="55" ry="14" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round"/>
        
        <!-- Planet Core -->
        <circle cx="100" cy="100" r="26" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
        
        <!-- Planet Surface Band -->
        <ellipse cx="100" cy="100" rx="26" ry="7" fill="#fbbf24" opacity="0.5"/>
      </g>

      <!-- 6. Mission Label -->
      <text x="100" y="182" fill="#a5b4fc" font-size="11" font-weight="800" letter-spacing="3" text-anchor="middle">
        ASTRO-34
      </text>

    </svg>
  </div>

</body>
</html>

Why this works:

The outer shield is created using <rect x="10" y="10" width="180" height="180" rx="35">.
The stars and space background use simple <circle> elements with varying radii ($1.5$–$2\text{px}$) and opacities.
The planet and its orbital ring are encapsulated in <g transform="rotate(-25 100 100)">, rotating the entire group around its center $(100, 100)$ by $-25^\circ$.

⚠️ Common Pitfalls

Confusing Circle cx/cy with Rectangle x/y: Placing a <circle x="100" y="100" r="50"> will cause the circle to render at $(0, 0)$ because circles do not have x/y attributes—they require cx and cy!
Negative Dimensions in SVGs: Setting width="-10", height="-5", or r="-20" is invalid in SVG geometry. Browsers immediately disable rendering of the invalid shape.
The Default Black Fill Gotcha: In SVG, the initial default value for the fill property is #000000 (pure black), and the default stroke is none. If you create a <circle cx="50" cy="50" r="40"/> without styling, it will render as a solid black disc.

💡 Pro Tips

Self-Balancing Rounded Corners: If you set rx="10" on a rectangle, you do NOT need to specify ry="10". The browser automatically mirrors ry = rx by default.
The 1-Line Stadium Pill Formula: To make any rectangle automatically adapt to a pill shape regardless of dynamic width/height, set rx="50%". The SVG 2 engine will clamp the radius to exactly half the shortest dimension.

📌 Key Takeaways

<rect> Origins: Anchored from top-left $(x, y)$, dimensioned via width and height, and rounded with rx and ry.
<circle> Origins: Anchored from mathematical center $(cx, cy)$ with radial distance r.
<ellipse> Origins: Anchored from $(cx, cy)$ with independent semi-major and semi-minor radii rx and ry.
<g> Containers: Group shapes together to share cascading styles and apply unified spatial transforms (translate, rotate, scale).
Defaults: SVG elements default to a solid black fill (fill="#000000") unless explicitly styled.
--

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

? Question 1 / 3

How do the positioning origins of `<rect>` and `<circle>` differ in the SVG coordinate plane?

Topic: HTML Fundamentals

? Question 2 / 3

What happens when you declare `<rect width="100" height="40" rx="30" />` in an SVG document?

Topic: HTML Fundamentals

? Question 3 / 3

Which SVG element is used to group multiple geometric primitives together and apply a shared rotation transformation?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. The <rect> Element (Rectangles & Rounded Boxes)

Attribute Specification Matrix:

Corner Radius Clamping Rule:

2. The <circle> Element (Equidistant Geometry)

3. The <ellipse> Element (Bi-Axial Curves)

4. Semantic Grouping with <g>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Construct a Space Exploration Mission Patch

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

How do the positioning origins of <rect> and <circle> differ in the SVG coordinate plane?

What happens when you declare <rect width="100" height="40" rx="30" /> in an SVG document?

Which SVG element is used to group multiple geometric primitives together and apply a shared rotation transformation?

1. The `<rect>` Element (Rectangles & Rounded Boxes)

2. The `<circle>` Element (Equidistant Geometry)

3. The `<ellipse>` Element (Bi-Axial Curves)

4. Semantic Grouping with `<g>`

How do the positioning origins of `<rect>` and `<circle>` differ in the SVG coordinate plane?

What happens when you declare `<rect width="100" height="40" rx="30" />` in an SVG document?