Chapter 4: SVG in HTML
SVG in HTML means putting SVG graphics directly inside your HTML code (instead of using a separate .svg file like an image).
This is the most powerful way to use SVG on websites — because once it’s inside HTML, it behaves almost like normal HTML elements. You can style it with CSS, animate it with CSS or JavaScript, change colors on hover, make it interactive, and it stays perfectly sharp on any screen size.
Quick Recap: What is SVG? (2-minute reminder)
- SVG = Scalable Vector Graphics
- Vector = math-based (lines, curves, shapes) → zoom 1000% = still crystal clear (no blur like JPG/PNG)
- It uses XML tags (very similar to HTML tags)
- Perfect for: logos, icons, buttons, illustrations, charts, animated elements on websites
Now the main question: How do we actually put SVG inside HTML?
There are a few ways to add SVG to HTML pages. The best ones (and most common in 2026) are these:
- Inline SVG (the hero method — most recommended)
- Using <img src=”file.svg”> (simple but limited)
- Using CSS background-image (for backgrounds)
We’ll focus mostly on inline SVG because that’s what “SVG in HTML” usually means when people ask.
1. Inline SVG – The Real Magic Way
You just write the <svg>…</svg> code directly inside your HTML file. No separate file needed!
Basic structure:
|
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 in HTML Example</title> </head> <body> <h1>Look — SVG right inside HTML!</h1> <!-- Here starts the SVG magic --> <svg width="200" height="200" viewBox="0 0 200 200"> <!-- Inside here we draw shapes --> <circle cx="100" cy="100" r="80" fill="yellow" stroke="black" stroke-width="5"/> <circle cx="70" cy="70" r="15" fill="black"/> <circle cx="130" cy="70" r="15" fill="black"/> <path d="M60 130 Q100 180 140 130" fill="none" stroke="black" stroke-width="10" stroke-linecap="round"/> </svg> </body> </html> |
Copy this whole code → save as index.html → open in Chrome/Firefox.
What you see: A big yellow smiley face!
- <svg width=”200″ height=”200″> → size on screen (in pixels)
- viewBox=”0 0 200 200″ → coordinate system inside SVG (very important for scaling — more later)
- <circle cx=”…” cy=”…” r=”…” fill=”…” stroke=”…” /> → draws a circle
- <path d=”…” /> → draws the smile curve (d = “data” commands like M=move, Q=quadratic curve)
2. Why Inline SVG is So Powerful (Teacher’s Favorite Points)
- Style with CSS like normal elements
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> circle.eye { fill: blue; } circle.smile { stroke: red; stroke-width: 12; } svg:hover circle.face { fill: orange; } </style> <svg width="150" height="150" viewBox="0 0 150 150"> <circle cx="75" cy="75" r="70" fill="yellow" class="face"/> <circle cx="50" cy="55" r="12" class="eye"/> <circle cx="100" cy="55" r="12" class="eye"/> <path d="M40 90 Q75 120 110 90" fill="none" stroke="black" class="smile"/> </svg> |
Hover over it — face turns orange!
- Animate easily with CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 |
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } svg { animation: spin 8s linear infinite; } |
The whole SVG spins forever!
- Change with JavaScript
|
0 1 2 3 4 5 6 |
document.querySelector('circle').setAttribute('fill', 'purple'); |
Eye color changes on page load!
- Accessible → add <title> and <desc> for screen readers
|
0 1 2 3 4 5 6 7 8 9 10 |
<svg ...> <title>Happy Smiley Face Icon</title> <desc>A yellow circle with two black eyes and a curved smile.</desc> <!-- shapes here --> </svg> |
3. Other Ways to Use SVG in HTML (Quick Overview)
- As image tag (easy but can’t style inner parts with CSS)
|
0 1 2 3 4 5 6 |
<img src="smiley.svg" alt="Smiley" width="100"> |
Good for simple logos, but no hover effects on parts.
- As background in CSS
|
0 1 2 3 4 5 6 7 8 9 |
div.hero { background-image: url('background-pattern.svg'); background-size: cover; } |
- Using <object> tag (old way, rare now)
|
0 1 2 3 4 5 6 |
<object type="image/svg+xml" data="logo.svg"></object> |
4. Important Attributes You Must Know (Every Tutorial Repeats These)
- width & height → actual display size
- viewBox=”minX minY width height” → internal coordinate system (makes SVG responsive)
- Example: viewBox=”0 0 100 100″ → think of canvas as 100×100 units → scales perfectly
- preserveAspectRatio → how it fits if proportions change (default: xMidYMid meet)
- xmlns=”http://www.w3.org/2000/svg” → must have on root <svg> (tells browser it’s SVG)
5. Quick Comparison Table (So It Sticks)
| Method | Can Style with CSS? | Can Animate Parts? | File Size Impact | Best For |
|---|---|---|---|---|
| Inline SVG | Yes (full power) | Yes | Adds to HTML | Icons, logos, interactive |
| <img src=”.svg”> | No (only outer) | No | Separate file | Simple static images |
| CSS background | No | No | Separate file | Repeating patterns |
Teacher’s Advice for Hyderabad Students (2026 Style 😄)
- Start practicing inline SVG right now — open VS Code, make a new file, copy examples
- Use it for: favicon, loading spinners, custom buttons, Tailwind icons, React components
- Best free resources:
- W3Schools → HTML SVG section
- MDN Web Docs → “SVG in HTML introduction”
- svg-tutorial.com → fun projects
- Common mistake: Forget viewBox → SVG looks wrong on mobile → always add it!
Understood so far? Want me to show a more advanced example (like gradient button, animated icon, or responsive logo)? Or explain viewBox with 3 different examples? Or how to copy SVG from Figma/Inkscape into HTML? Just tell me — I’m ready to go deeper! 🚀
