Chapter 3: SVG in HTML
SVG in HTML step by step — very clearly, like I’m explaining it to a curious friend who’s new to this.
First — What does SVG actually mean?
SVG = Scalable Vector Graphics
- Scalable → You can make it as big or as small as you want — zero quality loss (no pixelation!)
- Vector → It is made of mathematical instructions (lines, curves, points), not pixels
- Graphics → Pictures, icons, logos, charts, illustrations, animations, etc.
Compare this with normal photos (JPG, PNG, WebP):
| Feature | PNG / JPG (raster / pixel images) | SVG (vector) |
|---|---|---|
| Made of | Millions of tiny colored squares | Math equations (lines, curves) |
| Zoom / resize | Becomes blurry or pixelated | Always perfectly sharp |
| File size (simple shapes) | Usually bigger | Usually much smaller |
| Can edit with CSS | Almost never | Yes — color, size, stroke, animation |
| Can add interactivity | Hard (needs JS canvas) | Easy (it’s real DOM elements!) |
| Best for | Photos, complex paintings | Logos, icons, diagrams, illustrations |
How do we actually put SVG inside HTML? (3 popular ways)
- Inline SVG ← Most powerful (this is what we use most nowadays)
- <img src=”logo.svg”> ← Simple, but less control
- <object> or <iframe> → Rarely used now
The inline method is the real magic — because then SVG becomes part of the HTML DOM!
Basic structure of inline SVG
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SVG Demo</title> <style> svg { border: 1px solid #ccc; background: #f8f9fa; } </style> </head> <body> <!-- This is SVG living directly inside HTML --> <svg width="400" height="300" viewBox="0 0 400 300"> <!-- All drawing happens here --> </svg> </body> </html> |
Important attributes on <svg> tag:
- width & height → How big it appears on screen (in px, %, em, etc.)
- viewBox=”min-x min-y width height” → The internal coordinate system (very powerful!)
Let’s draw something simple — Basic shapes
Copy-paste and try this:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<svg width="500" height="400" viewBox="0 0 500 400"> <!-- Rectangle --> <rect x="50" y="50" width="200" height="120" fill="#4CAF50" stroke="black" stroke-width="4"/> <!-- Circle --> <circle cx="350" cy="110" r="80" fill="#FF9800" stroke="#333" stroke-width="5"/> <!-- Line --> <line x1="50" y1="250" x2="450" y2="250" stroke="#2196F3" stroke-width="8"/> <!-- Text --> <text x="250" y="340" font-size="60" fill="#E91E63" text-anchor="middle" font-family="Arial"> Hello SVG! </text> </svg> |
What each part means:
- <rect> → Rectangle (x = left, y = top)
- <circle> → cx,cy = center, r = radius
- <line> → start point → end point
- <text> → just like HTML text, but inside SVG
Very useful shape — The powerful <path>
Most beautiful SVGs use <path>. It uses a mini-language called “d” attribute.
Common commands:
- M = MoveTo (start point)
- L = LineTo
- Q = Quadratic curve
- C = Cubic curve
- A = Arc
- Z = close path
Example — simple heart:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg width="200" height="200" viewBox="0 0 200 200"> <path d="M100,40 C140,0 180,40 180,80 C180,120 140,160 100,180 C60,160 20,120 20,80 C20,40 60,0 100,40 Z" fill="#f44336" stroke="#b71c1c" stroke-width="5"/> </svg> |
Making it interactive with CSS (this is where SVG shines!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> .star { fill: gold; stroke: orange; stroke-width: 3; transition: all 0.4s; } .star:hover { fill: yellow; transform: scale(1.3); stroke: red; } </style> <svg width="120" height="120"> <polygon class="star" points="60,10 74,40 105,45 84,70 90,100 60,85 30,100 36,70 15,45 46,40"/> </svg> |
Hover over the star — it grows and changes color!
Quick comparison: SVG vs Canvas vs PNG
| When to choose | Best tool | Why? |
|---|---|---|
| Logo, icon, simple illustration | SVG | Sharp at any size, style with CSS, small file |
| Photo, screenshot | PNG / JPG | Only choice for pixel photos |
| 5000+ animated particles, game | Canvas or WebGL | Much better performance with huge objects |
| Interactive chart with 50 bars | SVG | Easy to attach events, style individually |
| 50,000 data points chart | Canvas | SVG becomes slow (too many DOM elements) |
Summary — Why learn SVG in 2025–2026?
- Perfect for responsive websites (looks great on phone, 4K monitor, print)
- Super small file size for icons & logos
- You can change color with CSS dark mode easily
- You can animate with CSS or SMIL or JS
- Search engines can read the text inside SVG
- You can make interactive maps, data visualizations, animated icons
Want to try one more fun example together? Like a loading spinner, gradient button, or animated checkmark? Just tell me — we’ll build it step by step! 😄
Happy coding! 🚀
