Section 4 · Chapter 13
HTML SVG Graphics
Scalable Vector Graphics (SVG) defines 2D vector-based graphics in XML format. Unlike pixel raster images, SVG images scale infinitely without pixelation, integrate seamlessly into the HTML DOM, and can be styled dynamically with CSS and JavaScript.
Live Code Example
Click Try it Yourself » to test inline SVG vector shapes and linear gradients live in the code playground.
Example: Inline SVG Vector Shapes & Gradients
<svg width="380" height="150" viewBox="0 0 380 150" style="background:#0f172a; border-radius:8px;">
<!-- Defs for Gradient -->
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#4f46e5" />
<stop offset="100%" stop-color="#06b6d4" />
</linearGradient>
</defs>
<!-- Circle with Gradient -->
<circle cx="70" cy="75" r="45" fill="url(#grad1)" stroke="#38bdf8" stroke-width="2" />
<!-- Rounded Rectangle -->
<rect x="145" y="30" width="90" height="90" rx="12" fill="#10b981" stroke="#047857" stroke-width="3" />
<!-- Star Polygon -->
<polygon points="310,30 319,57 348,57 325,74 334,101 310,84 286,101 295,74 272,57 301,57" fill="#f59e0b" />
</svg>
Try it Yourself »
13.1 SVG Container & ViewBox Coordinate Scaling
The viewBox attribute defines the internal coordinate system and aspect ratio of an SVG image. Its four space-separated values are: viewBox="min-x min-y width height".
Resolution Independence: Because SVG elements are defined using mathematical formulas (curves, radii, coordinates), vector graphics render at crisp 4K/Retina display clarity regardless of browser zoom level or screen density.
SVG ViewBox Coordinate System vs. Viewport Scaling
Try It Yourself: ViewBox Coordinate Scaling
<!-- SVG with 100x100 viewBox scaled to fill a 300x150 container -->
<svg width="100%" height="120" viewBox="0 0 200 100" style="background:#0f172a; border-radius:8px;">
<rect x="10" y="10" width="180" height="80" rx="8" fill="none" stroke="#6366f1" stroke-width="3" />
<text x="100" y="58" fill="#a5b4fc" font-size="16" font-weight="bold" text-anchor="middle">viewBox="0 0 200 100"</text>
</svg>
Try it Yourself »
13.2 Basic SVG Geometric Shape Tags
SVG provides pre-defined elements for standard geometric primitives such as rectangles, circles, ellipses, lines, polylines, and polygons.
| Tag | Core Attributes | Description |
|---|---|---|
<rect> |
x, y, width, height, rx, ry |
Draws rectangles with optional rounded corners (rx, ry). |
<circle> |
cx, cy, r |
Draws a circle given center point (cx, cy) and radius r. |
<ellipse> |
cx, cy, rx, ry |
Draws an ellipse with horizontal radius rx and vertical radius ry. |
<line> |
x1, y1, x2, y2 |
Draws a straight line segment from start point to end point. |
<polygon> |
points="x1,y1 x2,y2 ..." |
Draws a closed multi-sided shape connected by straight lines. |
Try It Yourself: Geometric Primitives & Polygons
<svg width="360" height="130" viewBox="0 0 360 130" style="background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px;">
<!-- Rect -->
<rect x="15" y="20" width="70" height="90" rx="8" fill="#4f46e5" />
<!-- Circle -->
<circle cx="135" cy="65" r="40" fill="#10b981" />
<!-- Ellipse -->
<ellipse cx="230" cy="65" rx="40" ry="25" fill="#ec4899" />
<!-- Triangle Polygon -->
<polygon points="300,105 345,105 322,25" fill="#f59e0b" />
</svg>
Try it Yourself »
13.3 SVG Paths & Path Commands (<path d="...">)
The <path> element is the most powerful SVG element. The d (definition) attribute contains path commands to draw lines, Bezier curves, and arc segments.
M x,y - Move to point (without drawing line)
L x,y - Line to point (draws straight line)
H x - Horizontal line to X coordinate
V y - Vertical line to Y coordinate
C x1,y1 x2,y2 x,y - Cubic Bezier Curve
Q x1,y1 x,y - Quadratic Bezier Curve
Z - Close Path (connects back to initial point)
Try It Yourself: Path Commands & Bezier Curves
<svg width="360" height="120" viewBox="0 0 360 120" style="background:#0f172a; border-radius:8px;">
<!-- Smooth Quadratic Wave Path -->
<path d="M 20,80 Q 90,10 160,80 T 300,80" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
<!-- Heart Shape Path -->
<path d="M 330,40 A 15,15 0 0,0 300,40 A 15,15 0 0,0 270,40 Q 270,70 300,95 Q 330,70 330,40 Z" fill="#f43f5e" />
</svg>
Try it Yourself »
13.4 SVG Styling, Gradients & DOM Tree
SVG elements exist directly in the HTML document object model (DOM), allowing full styling via CSS attributes (fill, stroke, stroke-dasharray, filter).
SVG XML Document Object Model (DOM) Tree & CSS Styling
Try It Yourself: SVG CSS Hover Animations & Text
<svg width="360" height="130" viewBox="0 0 360 130" style="background:#0f172a; border-radius:8px;">
<style>
.svg-btn { fill: #4f46e5; transition: fill 0.3s ease; cursor: pointer; }
.svg-btn:hover { fill: #10b981; }
</style>
<rect class="svg-btn" x="30" y="30" width="300" height="70" rx="14" stroke="#38bdf8" stroke-width="2" />
<text x="180" y="72" fill="#ffffff" font-size="18" font-weight="bold" text-anchor="middle" style="pointer-events:none;">HOVER SVG BUTTON</text>
</svg>
Try it Yourself »
13.5 SVG vs. Canvas Comparison & Live Studio
| Feature | SVG (Scalable Vector Graphics) | HTML5 Canvas 2D |
|---|---|---|
| Mode | Retained Mode (XML DOM Tree elements) | Immediate Mode (Bitmap pixel surface) |
| Scalability | Infinitely crisp at any resolution/zoom | Pixelates when scaled beyond buffer resolution |
| Event Handlers | Native event listeners on every element (onclick) |
Manual pixel coordinate collision detection |
| Best Used For | UI icons, logos, charts, illustrations, responsive diagrams | High-FPS games, pixel video filters, particle effects |
Live Interactive SVG Graphic Generator Studio
Try It Yourself: Interactive SVG Polygon & Vector Icon
<svg width="220" height="140" viewBox="0 0 220 140" style="background:#0f172a; border-radius:8px;">
<polygon points="110,20 123,55 160,55 130,77 141,112 110,90 79,112 90,77 60,55 97,55" fill="#4f46e5" stroke="#38bdf8" stroke-width="3" />
</svg>
Try it Yourself »
💻 Chapter 13 Hands-On Code Challenge
Build a Scalable SVG Badge featuring a circle background, inner star polygon, and responsive viewBox scaling:
Key Takeaways & Summary
- Resolution Independence: SVG vector graphics scale smoothly to any screen resolution or zoom level without loss of quality.
- XML DOM Integration: SVG graphics live inside the HTML DOM tree, making individual nodes controllable via CSS and JavaScript.
- ViewBox Attribute: The
viewBoxattribute controls coordinate scaling and aspect ratio preservation. - Geometric Primitives: Use
<rect>,<circle>,<ellipse>,<line>,<polygon>, and<path>to create complex illustrations.