SVG Mastery: Paths, Gradients, Animation

Lesson 39 • Advanced Track

What You'll Learn

Create shapes with SVG: rect, circle, ellipse, polygon, line, path
Apply linear/radial gradients, drop shadows, and text along paths
Animate SVG paths with stroke-dasharray/dashoffset drawing effect
Build a reusable icon system using currentColor
Use CSS to animate SVG elements (pulse, spin, colour cycle)

💡 Real-World Analogy

SVG is like vector art in Illustrator — it uses mathematical descriptions (coordinates, curves) instead of pixels. Zoom in 1000× and it's still perfectly sharp. Canvas is a photograph; SVG is an architectural blueprint. Each element in SVG is individually addressable, styleable, and interactive.

Understanding SVG

SVG (Scalable Vector Graphics) is an XML-based image format built into the browser. Unlike Canvas, SVG elements are part of the DOM — you can style them with CSS, attach JavaScript event listeners, and inspect them in DevTools.

The viewBox attribute is the most important SVG concept: it defines the coordinate system. viewBox="0 0 24 24" means the SVG's internal grid is 24×24 units, regardless of the actual pixel size on screen. This is what makes SVG resolution-independent.

SVG Elements Reference

Element	Key Attributes	Use Case
<rect>	x, y, width, height, rx	Rectangles, rounded corners
<circle>	cx, cy, r	Circles, dots, avatars
<ellipse>	cx, cy, rx, ry	Oval shapes
<polygon>	points	Triangles, stars, custom shapes
<path>	d (M, L, Q, C, A, Z)	Any shape — most flexible
<text>	x, y, text-anchor	Text rendering in SVG

1. SVG Basic Shapes

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
svg { display: block; margin: 16px 0; }
h2 { color: #1565C0; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; }
.shapes-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
</style></head><body>
<h1>SVG Basic Shapes</h1>
<div class="shapes-row">
    <div>
        <svg width="120" height="120"><rect x="10" y="10" width="100" height="100" rx="12" fill="#1976D2" /></
...

2. Gradients, Filters & Text Paths

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
svg { display: block; margin: 16px 0; }
</style></head><body>
<h1>SVG Gradients, Filters & Text</h1>
<h2>Linear Gradient</h2>
<svg width="400" height="80">
    <defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F44336" /><stop offset="50%" stop-color="#FF9800" /><stop offset="100%" stop-color="#4CAF50" /></linearGradient></defs>
   
...

The <defs> element: Gradients, filters, clip paths, and patterns are defined inside <defs> and referenced via url(#id). They're not rendered directly — they're reusable definitions, like CSS classes for SVG.

3. SVG Animations with CSS

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
svg { display: block; margin: 16px 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.draw-path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 3s ease forwards; }
@keyframes pulse { 0%, 100% { r: 30; opacity: 1; } 50% { r: 45; opacity: 0.6; } }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.spin
...

4. Icon System with currentColor

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
.icon { transition: transform 0.2s, color 0.2s; cursor: pointer; }
.icon:hover { transform: scale(1.2); }
.icon-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.icon-card { text-align: center; padding: 16px; border: 1px solid #e0e0e0; border-radius: 12px; min-width: 80px; }
.icon-card p { margin: 8px 0 0; font-size: 0.8rem; color: #666; }
...

When to Use This

Icons: Inline SVG with currentColor for themeable, scalable icons
Logos: SVG logos stay sharp on Retina displays and print
Diagrams: Flowcharts, org charts, and technical illustrations
Animations: Path drawing effects, loading spinners, micro-interactions
NOT for: Photos, complex scenes with many elements (use Canvas), or pixel-level manipulation

Common Mistakes

Missing viewBox — Without viewBox, SVGs won't scale properly when you change width/height. Always include it.
Using SVG for photographs — SVG describes shapes mathematically. Photos are pixel data — use <img> for those.
Animating too many SVG nodes — Complex SVGs with hundreds of paths can cause performance issues when animated. Simplify paths first.
Hardcoding fill colours — Use currentColor for icons so they inherit the parent's colour and work with themes.
Forgetting xmlns for external SVG — Inline SVG in HTML doesn't need xmlns, but SVG files used as <img src> or in CSS require it.
Not optimising SVG files — SVG exported from design tools contains unnecessary metadata. Run through SVGO to reduce file size.

🎉 Lesson Complete

✅ SVG shapes: rect, circle, ellipse, polygon, line, path
✅ <defs> contains reusable gradients, filters, and clip paths
✅ Path drawing animation uses stroke-dasharray + stroke-dashoffset
✅ CSS can animate SVG elements (transform, opacity, fill, stroke)
✅ viewBox makes SVG resolution-independent and scalable
✅ currentColor makes icons inherit the parent's text colour
✅ Inline SVG is styleable with CSS and responds to DOM events
✅ Always optimise SVG files with SVGO before production

SVG Mastery: Paths, Gradients, Animation

What You'll Learn

💡 Real-World Analogy

Understanding SVG

SVG Elements Reference

1. SVG Basic Shapes

2. Gradients, Filters & Text Paths

3. SVG Animations with CSS

4. Icon System with currentColor

When to Use This

Common Mistakes

🎉 Lesson Complete

Cookie & Privacy Settings