HTML SVG (Scalable Vector Graphics) defines resolution-independent 2D vector graphics directly inside HTML documents using XML tags like <svg>, <circle>, <rect>, <path>, and <polygon>.
Unlike bitmapped raster images (PNG, JPEG), SVG graphics scale infinitely to any screen size or Retina resolution without becoming blurry or losing quality:
<!-- Inline SVG circle primitive -->
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#38bdf8" stroke="#0284c7" stroke-width="4" />
</svg>
<!-- SVG vector path -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke-width="2" />
</svg>
Key SVG shapes and features:
<svg> Wrapper: Defines vector viewport canvas bounds using viewBox="0 0 width height".<circle> & <rect>: Built-in vector primitives for circles and rectangles.<path>: Powerful vector path drawer utilizing drawing commands (M move, L line, C curve, Z close).fill, stroke, hover, and animation properties.flowchart TD
A["Web Graphics Choice"] --> B["SVG (Scalable Vector Graphics)"]
A --> C["Canvas (Bitmapped Raster Surface)"]
B --> B1["Vector Paths -> Infinite Scaling + CSS Styleable + DOM Inspectable"]
C --> C1["Pixel Grid -> Best for High-FPS Games & Complex Particle Physics"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML SVG Demonstration</title>
<style>
.svg-icon { transition: transform 0.3s ease, fill 0.3s ease; cursor: pointer; }
.svg-icon:hover { transform: scale(1.15); fill: #34d399; }
</style>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Scalable Vector Graphics Showcase</h2>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; display: inline-flex; align-items: center; gap: 1rem;">
<!-- Interactive Inline SVG Heart Icon -->
<svg class="svg-icon" width="48" height="48" viewBox="0 0 24 24" fill="#ef4444">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<p style="margin: 0;">Hover over the SVG vector heart to test scaling and color transitions!</p>
</div>
</body>
</html>
<svg> tags reduce external HTTP image requests and allow styling icon colors dynamically with CSS fill: currentColor.viewBox on SVG containers: The viewBox attribute ensures SVG graphics scale responsively inside fluid container elements.Create an inline <svg> element containing a <rect> primitive with width="80", height="40", fill="#38bdf8", and rx="6" for rounded corners!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.