🎬 Phase 7 · Media & Embeds🟡 IntermediateModule 08

SVG Basics

⏱ 18 min read📖 4 sections🧩 5-question quiz

Course Progress83% complete

SVG (Scalable Vector Graphics) is an XML-based image format that lives inside HTML. Unlike raster images (PNG, JPG), SVG graphics are mathematically described and scale perfectly to any resolution — making them ideal for logos, icons, and diagrams. You can write SVG directly in HTML, style it with CSS, and animate it with JavaScript.

Section 1

Inline SVG vs <img> vs CSS

There are three ways to use SVG. Your choice depends on whether you need CSS styling, animation, or just a static image:

Method	CSS control	JS access	Best for
Inline SVG <svg> in HTML	Full — every element is targetable	Full DOM access	Icons you need to style/animate, logos with hover effects
<img src="file.svg">	None — treated like a raster image	None	Static illustrations, decorative images with alt text
CSS background-image	Positioning only	None	Purely decorative patterns, dividers

HTMLSVG as img vs inline

<!-- Method 1: External file via img -->
<img src="logo.svg" alt="BitWithBite logo"
     width="120" height="40">

<!-- Method 2: Inline — CSS can target fill/stroke -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     width="24" height="24"
     aria-hidden="true"
     focusable="false">
  <path d="M12 2L2 7l10 5 10-5-10-5z"
        fill="currentColor"/>
</svg>

💡

fill="currentColor" — the CSS icon trick

Setting fill="currentColor" on SVG paths makes them inherit the CSS color property of their parent. This means your icon automatically changes color when you set color: red on the button it's inside — no separate SVG targeting needed. This is the standard pattern for icon systems.

Section 2

Basic Shapes

SVG has six basic shape elements. All accept fill (inside color) and stroke/stroke-width (border) attributes — or inherit them from CSS.

<rect>

<circle>

<ellipse>

<polygon>

<line>

<path>

SVGAll basic shapes

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

  <!-- Rectangle: x, y = top-left corner; rx = border-radius -->
  <rect x="5" y="10" width="40" height="30"
        rx="4" fill="#ef4444"/>

  <!-- Circle: cx,cy = center; r = radius -->
  <circle cx="75" cy="25" r="20"
          fill="none" stroke="#a78bfa" stroke-width="2"/>

  <!-- Ellipse: rx,ry = horizontal/vertical radii -->
  <ellipse cx="135" cy="25" rx="28" ry="15"
           fill="#2de8c0" opacity="0.5"/>

  <!-- Polygon: points = x,y pairs -->
  <polygon points="185,5 200,45 170,45"
           fill="#fbbf24"/>

  <!-- Line: x1,y1 = start; x2,y2 = end -->
  <line x1="5" y1="70" x2="80" y2="90"
        stroke="#fb923c" stroke-width="3"/>

  <!-- Path: M=moveto L=lineto Q=quadratic C=cubic Z=close -->
  <path d="M100 90 Q140 50 180 90"
        fill="none" stroke="#22d3ee" stroke-width="2"/>
</svg>

Section 3

viewBox — The SVG Coordinate System

viewBox defines the internal coordinate system: viewBox="min-x min-y width height". The SVG scales its contents to fill the width/height of the element while preserving this coordinate system — this is what makes SVG infinitely scalable.

SVGviewBox explained

<!-- viewBox="0 0 24 24" means:
     The drawing space is 24x24 units
     The SVG element can be any actual pixel size -->

<!-- Same SVG, rendered at 24px -->
<svg viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="10" fill="red"/>
</svg>

<!-- Exact same SVG, rendered at 200px — still sharp -->
<svg viewBox="0 0 24 24" width="200" height="200">
  <circle cx="12" cy="12" r="10" fill="red"/>
</svg>

<!-- Without viewBox: shapes drawn at literal pixels
     They DON'T scale with the element size -->
<svg width="200" height="200">    <!-- no viewBox -->
  <circle cx="12" cy="12" r="10"/> <!-- tiny, top-left -->
</svg>

Section 4

Accessible SVG

SVG accessibility depends on whether the graphic conveys information or is purely decorative:

SVGDecorative vs meaningful SVG

<!-- DECORATIVE icon (next to text that explains it) -->
<button>
  <svg aria-hidden="true" focusable="false"
       viewBox="0 0 24 24" width="20">
    <path d="M19 11H7.83l4.88-4.88..."
          fill="currentColor"/>
  </svg>
  Download PDF
</button>

<!-- MEANINGFUL standalone icon/chart -->
<svg role="img"
     viewBox="0 0 100 60"
     xmlns="http://www.w3.org/2000/svg">
  <title>Bar chart: Q1 revenue was highest at $45k</title>
  <desc>Three bars showing Q1 $45k, Q2 $32k, Q3 $38k</desc>
  <!-- chart shapes... -->
</svg>

SVG type	Pattern
Decorative icon (next to text)	`aria-hidden="true" focusable="false"` — hide from screen readers
Standalone icon (no adjacent text)	`role="img"` + `<title>` inside the SVG
Complex diagram/chart	`role="img"` + `<title>` + `<desc>` for full description

🎬

Module 8 Complete!

Audio, video, iframes, and SVG — you can now embed any type of media and third-party content in a page. You know the security considerations, accessibility requirements, and performance patterns for each.

Final stretch: Module 9 — Advanced HTML. Meta tags & SEO, accessibility deep-dive, data attributes, HTML entities, canvas, and a capstone project.

Start Module 9 →Course Home

🧩 Quick Check — Lesson 29

5 questions · instant feedback

1. What is the main advantage of SVG over raster formats like PNG?

2. What does fill="currentColor" on an SVG path do?

3. What does the viewBox attribute define?

4. When should you add aria-hidden="true" to an inline SVG icon?

5. Which SVG element is most flexible for drawing complex shapes like logos and icons?

🎉

Module 8 Complete!

SVG, audio, video, iframes — all done. On to Module 9: Advanced HTML!

🏆

Lesson 29 Challenge

Build exercise · 25 min

Build a simple SVG icon set and a bar chart using inline SVG.

Part 1 — Icon set (3 icons):
- A "home" icon using <path> with a house shape (M10 20 L10 10 L20 5 L30 10 L30 20 Z + door rect)
- A "star" icon using <polygon> with 5 points
- A "circle check" icon using <circle> + <path> for the checkmark
- All icons should use fill="currentColor" and be aria-hidden="true" (they'll sit next to labels)
- Color them via CSS on a parent div, not on the SVG attributes

Part 2 — Bar chart:
- 4 bars using <rect> elements with different heights
- <text> labels below each bar
- Add role="img" + <title> + <desc> for accessibility
- Make the chart responsive with viewBox and width:100%

Show hints

Star polygon points formula: 5-pointed star at center 50,50 radius 45 — calculate with Math.cos/sin or use: "50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35"
SVG text: <text x="40" y="95" text-anchor="middle" font-size="12">Q1</text>
Responsive SVG: set viewBox, omit fixed width, then width:100% in CSS
Bars grow from the bottom: y = chartHeight - barHeight, height = barHeight

← iFrame Embeds

Lesson 29 of 35

Meta Tags & SEO →