Chapter 2: SVG in HTML
What is SVG in HTML
I’m going to explain it like we’re sitting together on your laptop, step-by-step, very slowly, with simple English, real analogies, lots of copy-paste examples, and clear “why” explanations. By the end you’ll know exactly:
- What SVG means when we say “in HTML”
- The 4 main ways to put SVG inside an HTML page
- Which way is best for different situations
- How to style and animate it with CSS
- Common mistakes beginners make
Ready? Let’s open VS Code (or Notepad) and start!
1. Quick Recap: What is SVG? (30-second reminder)
SVG = Scalable Vector Graphics = pictures made with math/code (not pixels) → zoom forever = no blur → small file size for icons/logos → can be styled with CSS, animated, made interactive
Now the real question: How do we actually use SVG inside a normal .html webpage?
There are four popular ways to bring SVG into HTML — and each has its own superpowers and rules.
2. The 4 Ways to Use SVG in HTML (Big Comparison Table)
| # | Method | Code Looks Like | Can style with CSS? | Can animate with CSS? | Can use JavaScript? | Best for | File size impact |
|---|---|---|---|---|---|---|---|
| 1 | Inline SVG | <svg>…</svg> directly in HTML | Yes – full power | Yes | Yes – full access | Icons you want to animate/color-change | Slightly bigger HTML |
| 2 | <img> tag | <img src=”heart.svg” alt=”like”> | Very limited | Almost no | Very limited | Simple static icons | Separate file (cached) |
| 3 | CSS background-image | background: url(‘arrow.svg’) | Very limited | Limited | No | Repeating patterns, decorative bg | Separate file |
| 4 | <object> tag | <object data=”map.svg” type=”image/svg+xml”> | Some (with tricks) | Some | Limited | Very old browser support + fallback | Separate file |
Teacher recommendation for 2025–2026: Use #1 (Inline SVG) most of the time — especially if you want color changes, hover effects, or animations. Use #2 (<img>) only when the SVG is purely decorative/static and you want it cached separately.
3. Method #1 – Inline SVG (The Most Powerful & Most Popular)
You literally copy-paste the <svg>…</svg> code inside your HTML.
Live Example – Simple Heart Icon
|
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 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SVG in HTML – Arman Learns</title> <style> .heart { width: 80px; height: 80px; transition: all 0.3s ease; } .heart:hover { transform: scale(1.3); fill: #ff3366; /* changes color on hover! */ } .heart path { transition: fill 0.4s; } </style> </head> <body> <h2>Inline SVG Heart – Click or Hover Me!</h2> <svg class="heart" viewBox="0 0 32 29.6"> <path d="M23.6,0c-3.1,0-5.9,1.4-7.8,3.7C13.5,1.4,10.5,0,7.4,0C3.3,0,0,3.3,0,7.4 c0,5.1,4.6,9.3,11.6,15.9l1.2,1.1l1.2-1.1C27.4,16.7,32,12.5,32,7.4C32,3.3,28.7,0,23.6,0z"/> </svg> </body> </html> |
What’s happening here?
- The <svg> is inside the HTML → browser treats it like any other element
- We gave it a class .heart → normal CSS works!
- :hover → scale bigger + change fill color
- viewBox → makes sure it scales perfectly no matter what width/height we set
Magic benefit: One single SVG code → unlimited color variations with CSS only (no need for 10 different PNG files).
4. Method #2 – Using <img> (Simplest – but weakest)
|
0 1 2 3 4 5 6 |
<img src="icons/star.svg" alt="Favorite" width="48" height="48" /> |
Good points
- Very easy
- Browser caches the file → fast on repeat visits
- Works with srcset for responsive images
Bad points
- Cannot change color with CSS (except trick with filter)
- Cannot animate internal parts
- Cannot add click events to inner shapes
When to use: Static icons that never change color (example: company logo in header)
5. Quick Bonus: Change Color of <img> SVG with CSS Filter (Trick)
|
0 1 2 3 4 5 6 7 8 |
img[src$=".svg"] { filter: hue-rotate(200deg) saturate(3); } |
→ turns blue icon purple, etc. But it’s not perfect — inline is still better for real control.
6. Method #3 – CSS Background (Mostly for Decorative Stuff)
|
0 1 2 3 4 5 6 7 8 9 |
.card { background: url('patterns/waves.svg') repeat; background-size: 300px; } |
Good for subtle repeating backgrounds, not for important icons.
7. Real-World Examples You See Every Day (2026 Websites)
| Website / App | How they use SVG in HTML | Why? |
|---|---|---|
| YouTube | Inline SVG for play button, like button | Animate on hover, change color dark mode |
| TailwindCSS docs | Inline SVG icons everywhere | Easy to change size/color with classes |
| Google Maps | SVG for pins, routes (vector maps!) | Zoom forever without pixelation |
| Most React apps | Inline SVG or component <HeartIcon /> | Full control + reusability |
| Twitter/X | Inline SVG for bird logo, hearts, retweets | Theme changes instantly |
8. Common Beginner Mistakes (Arman – Don’t Do These!)
- Forgetting viewBox → icon becomes stretched/weird when resized
- Using <img> when you need hover color change → then frustrated why CSS doesn’t work
- Putting huge 5000×5000 SVG code inline → page becomes slow (optimize first!)
- Not adding role=”img” + aria-label → bad for screen readers
Good habit:
|
0 1 2 3 4 5 6 |
<svg role="img" aria-label="Red heart icon" ...> |
9. Your 5-Minute Practice Task
- Copy the heart example above
- Change the hover color to #00ff88 (bright green)
- Make it 120px big
- Add another class .pulse with animation:
|
0 1 2 3 4 5 6 7 8 9 10 |
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .pulse { animation: pulse 2s infinite; } |
Apply both .heart.pulse — watch it beat!
Paste your final code here if you want feedback — I’ll correct/review like a proud sir 😄
Summary – One-line Takeaway
“SVG in HTML” mostly means inline <svg>…</svg> code so you can use CSS and JavaScript to control colors, size, animation, and interaction — something impossible with normal PNG/JPG images.
Got any doubt right now? “Sir, viewBox aur width mein kya fark hai?” “Animation kaise karte hain SVG mein?” “Game mein SVG use kar sakte hain kya?”
Ask anything — we’ll go as deep as you want next!
Class rocking… ab aap bolo! 🎨🚀
