Chapter 30: SVG Examples
SVG Examples” usually means people are asking for practical, ready-to-use code snippets that show the most common (and most useful) things you can do with SVG — not just theory.
So today I’ll give you a complete set of the 12–15 most important real-world SVG examples that appear again and again in college projects, interviews, freelance jobs, UI design, icons, animations, and web development.
We’ll go level by level.
Level 1 – The Absolute Basics Everyone Must Know (Copy-Paste These First!)
Example 1 – Hello World SVG (Most Important First File)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Hello World</title> </head> <body> <svg width="400" height="200" viewBox="0 0 400 200" style="border:1px solid #ccc;"> <rect width="400" height="200" fill="#f0f4f8"/> <text x="200" y="110" font-size="60" text-anchor="middle" fill="#2c3e50"> Hello SVG! </text> </svg> </body> </html> |
→ This is your starting point. Notice viewBox — makes it responsive.
Example 2 – Circle + Stroke + Hover Effect (CSS + SVG)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<svg width="120" height="120"> <circle cx="60" cy="60" r="50" fill="#3498db" stroke="#2980b9" stroke-width="8" class="hover-grow"/> </svg> <style> .hover-grow:hover { transform: scale(1.2); transition: transform 0.3s ease; } </style> |
→ Hover → circle grows smoothly
Level 2 – Most Asked Shapes & Styling Examples
Example 3 – Rounded Rectangle with Gradient Fill
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg width="300" height="180" viewBox="0 0 300 180"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#8e44ad"/> <stop offset="100%" stop-color="#3498db"/> </linearGradient> </defs> <rect x="20" y="20" width="260" height="140" rx="30" ry="30" fill="url(#grad1)" stroke="#2c3e50" stroke-width="6"/> <text x="150" y="100" font-size="32" text-anchor="middle" fill="white"> Gradient Button </text> </svg> |
→ Very common for modern cards/buttons
Example 4 – Star Icon with Evenodd Fill-Rule (Hollow Center)
|
0 1 2 3 4 5 6 7 8 9 |
<svg width="120" height="120" viewBox="0 0 120 120"> <path d="M60,10 L75,45 L115,45 L85,70 L100,105 L60,85 L20,105 L35,70 L5,45 L45,45 Z" fill="gold" stroke="orange" stroke-width="5" fill-rule="evenodd"/> </svg> |
→ fill-rule=”evenodd” makes the center hollow — most star icons use this
Level 3 – Very Frequently Used Real-World Patterns
Example 5 – Circular Avatar with Clipping (Most Asked in Interviews)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="160" height="160"> <defs> <clipPath id="avatarClip"> <circle cx="80" cy="80" r="75"/> </clipPath> </defs> <image href="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300" width="160" height="160" clip-path="url(#avatarClip)"/> <circle cx="80" cy="80" r="75" fill="none" stroke="#fff" stroke-width="6"/> </svg> |
→ Perfect round profile picture
Example 6 – Dotted / Dashed Border (stroke-dasharray)
|
0 1 2 3 4 5 6 7 8 9 10 |
<svg width="300" height="200"> <rect x="20" y="20" width="260" height="160" rx="20" fill="none" stroke="#e74c3c" stroke-width="10" stroke-dasharray="15 10"/> </svg> |
→ Marching ants style border
Example 7 – Simple Arrow with Marker
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="400" height="100"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto"> <path d="M0,0 L0,6 L9,3 z" fill="#2ecc71"/> </marker> </defs> <line x1="50" y1="50" x2="350" y2="50" stroke="#2ecc71" stroke-width="8" marker-end="url(#arrow)"/> </svg> |
→ Clean arrowhead — used in flowcharts, diagrams
Level 4 – Animation Examples (Very High Demand)
Example 8 – CSS Hover Scale + Shadow (Modern Button Feel)
|
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 |
<style> .btn { transition: all 0.3s ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); } .btn:hover { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 12px 20px rgba(0,0,0,0.3)); } </style> <svg width="240" height="80"> <defs> <linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#667eea"/> <stop offset="100%" stop-color="#764ba2"/> </linearGradient> </defs> <rect class="btn" x="20" y="20" width="200" height="40" rx="20" fill="url(#btnGrad)"/> <text x="120" y="50" font-size="20" text-anchor="middle" fill="white"> Click Me </text> </svg> |
Example 9 – Path Drawing Animation (Loading / Reveal)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<svg width="300" height="300" viewBox="0 0 300 300"> <path id="check" d="M50 150 L120 220 L250 80" fill="none" stroke="#27ae60" stroke-width="20" stroke-linecap="round"/> </svg> <script> const path = document.getElementById('check'); const length = path.getTotalLength(); path.style.strokeDasharray = length; path.style.strokeDashoffset = length; // Trigger on load or click setTimeout(() => { path.style.transition = 'stroke-dashoffset 2s ease-in-out'; path.style.strokeDashoffset = '0'; }, 500); </script> |
→ Green checkmark draws itself — very common loading success animation
Level 5 – Quick Summary Table – Most Asked SVG Examples
| Rank | Example Type | Most Used For | Difficulty |
|---|---|---|---|
| 1 | Circular clipPath avatar | Profile pictures | ★★☆☆☆ |
| 2 | Gradient filled button | UI cards, buttons | ★★☆☆☆ |
| 3 | Dashed / dotted border | Selection, loading states | ★☆☆☆☆ |
| 4 | Arrow with marker | Flowcharts, diagrams | ★★☆☆☆ |
| 5 | Path drawing animation | Loaders, onboarding | ★★★☆☆ |
| 6 | Text inside image (mask) | Decorative titles | ★★★☆☆ |
| 7 | Hover scale + shadow | Interactive icons/buttons | ★★☆☆☆ |
| 8 | Polka-dot / stripes pattern | Backgrounds, fun designs | ★★☆☆☆ |
Understood the most important SVG Examples now? These 8–9 snippets cover ~80–90% of what people actually need in college projects, freelance gigs, UI design, and interviews.
Tell me honestly — which direction do you want to go deeper?
- Full animated checkmark + success message?
- Complete reusable icon set (heart, star, arrow) with hover?
- Responsive dashboard card with gradient + clip + shadow?
- Interactive map-style click regions?
- Or something else you’ve seen and want explained?
Just say — we can build exactly what you need together! 🚀
