🖼️ Module 14 · Advanced Elements🔴 AdvancedLESSON 48

SVG Basics

⏱️ 17 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress48%

🎯 What you'll learn: Inline <svg>, basic shapes, the viewBox coordinate system, stroke/fill, and using SVG as scalable icons.

Section 1

Inline SVG & Basic Shapes

SVG (Scalable Vector Graphics) is XML-based markup that draws vector shapes — meaning it stays crisp at any zoom level, unlike a raster PNG or JPEG. You can write it directly inline in your HTML.

svg-shapes.html

HTML

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#2de8c0"/>
  <rect x="10" y="10" width="30" height="30" fill="orange"/>
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
</svg>

Section 2

viewBox — The Coordinate System

viewBox="min-x min-y width height" defines the internal coordinate space of the SVG, independent of its rendered pixel size. This is what makes SVG truly scalable — the shapes inside are drawn relative to the viewBox, then stretched to fit whatever width/height you display it at.

svg-viewbox.html

HTML

<svg viewBox="0 0 24 24" width="48" height="48">
  <path d="M12 2 L2 22 L22 22 Z" fill="#ef4444"/>
</svg>

💡

This is why icon sets use viewBox="0 0 24 24"

A 24×24 coordinate grid is a common icon convention — the same path data renders correctly whether you display it at 16px or 200px, because viewBox handles the scaling.

Section 3

stroke, fill & Using SVG as Icons

fill colors the interior of a shape; stroke colors its outline. Both accept CSS colors and can even be controlled from an external stylesheet if the SVG is inline (not in an <img>).

svg-icon-css.html

HTML

<!-- In CSS: -->
.icon-close { fill: currentColor; }
.icon-close:hover { fill: red; }

<!-- In HTML: -->
<svg class="icon-close" viewBox="0 0 24 24" width="20">
  <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" stroke-width="2"/>
</svg>

Element	Draws
circle	Circle (cx, cy, r)
rect	Rectangle (x, y, width, height)
line	Straight line (x1, y1, x2, y2)
polygon	Closed multi-point shape (points list)
path	Any custom shape via the d attribute's path commands

🧩 Knowledge Check — Lesson 48

5 questions to test your understanding.

1. Why does SVG stay crisp at any zoom level, unlike a PNG?

2. What does viewBox define?

3. What's the difference between fill and stroke?

4. What draws a circle in SVG?

5. What's a key advantage of inline SVG over an SVG loaded as an img?

💪

Coding Challenge — Lesson 48

Apply what you learned · Advanced Level

Challenge: Build a Checkmark Icon

Build an inline SVG icon with viewBox="0 0 24 24", using a path to draw a simple checkmark shape, stroke="currentColor", fill="none", and stroke-width="2".

💡 Show hints if you're stuck

A simple check path: d="M4 12 L9 17 L20 6"

Finished this lesson?

Mark it complete to track your progress.

Lesson 48 of 62Module 14 — Advanced Elements

SVG Basics

Inline SVG & Basic Shapes

viewBox — The Coordinate System

stroke, fill & Using SVG as Icons

Lesson 48 Complete!