Lesson 23: Scalable Vector Graphics (SVG)
Learn to create resolution-independent graphics with SVG, from basic shapes to complex animations
Start LearningIntroduction to SVG
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster images (like JPG or PNG), SVGs are resolution-independent and look crisp at any size.
Key Benefits:
- Resolution independence - scales to any size without quality loss
- Small file sizes, especially for simple graphics
- Style with CSS and manipulate with JavaScript
- Supports animations and interactivity
- Accessible and SEO-friendly as text is selectable
Basic SVG Structure
<svg width="200" height="200" viewBox="0 0 200 200"> <circle cx="100" cy="100" r="80" fill="#3498db" /> <text x="100" y="110" text-anchor="middle" fill="white">SVG Circle</text> </svg>
Result:
SVG vs Canvas
| Feature | SVG | Canvas |
|---|---|---|
| Graphics Type | Vector (shapes) | Raster (pixels) |
| Resolution | Resolution independent | Resolution dependent |
| DOM Access | Full access to elements | No DOM access (pixel-based) |
| Animation | Built-in SMIL or CSS/JS | Requires JavaScript |
| Event Handling | Per-element events | Single element events |
| Best For | Icons, logos, illustrations | Games, image processing |
Basic SVG Shapes
SVG provides several basic shape elements that you can combine to create complex graphics.
Rectangle <rect>
<rect x="25" y="20" width="100" height="80" rx="10" />
Circle <circle>
<circle cx="75" cy="60" r="50" />
Ellipse <ellipse>
<ellipse cx="75" cy="60" rx="60" ry="40" />
Line <line>
<line x1="30" y1="30" x2="120" y2="90" />
Polygon <polygon>
<polygon points="75,10 120,100 30,100" />
Polyline <polyline>
<polyline points="20,80 40,40 60,80..." />
Combining Shapes Example
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="20" y="20" width="160" height="160" rx="20"
fill="#e3f2fd" stroke="#bbdefb" stroke-width="2" />
<circle cx="100" cy="80" r="30" fill="#ff9800" />
<polygon points="100,120 70,180 130,180" fill="#4caf50" />
<line x1="20" y1="100" x2="180" y2="100"
stroke="#9c27b0" stroke-width="2" stroke-dasharray="5,5" />
</svg>
Result:
SVG Paths
The <path> element is the most powerful SVG element, capable of creating complex shapes using a series of commands.
Path Commands
| Command | Description |
|---|---|
| M x y | Move to (x, y) |
| L x y | Line to (x, y) |
| H x | Horizontal line to x |
| V y | Vertical line to y |
| C x1 y1, x2 y2, x y | Cubic Bézier curve to (x, y) |
| Q x1 y1, x y | Quadratic Bézier curve to (x, y) |
| A rx ry, x-axis-rotation, large-arc, sweep, x y | Elliptical arc to (x, y) |
| Z | Close path |
Path Example: Heart Shape
<svg width="200" height="180">
<path d="M100,30
C70,0 0,40 100,150
C200,40 130,0 100,30 Z"
fill="#e74c3c" stroke="#c0392b" stroke-width="2" />
</svg>
Result:
SVG Text and Styling
SVG provides powerful text capabilities with precise positioning and styling options.
Text Properties
| Attribute | Description |
|---|---|
| x, y | Position of the text |
| text-anchor | start, middle, end (horizontal alignment) |
| dominant-baseline | Vertical alignment (middle, hanging, etc.) |
| font-family | Font family |
| font-size | Text size |
| font-weight | Boldness (normal, bold) |
| text-decoration | underline, overline, line-through |
Text on a Path
<svg width="300" height="200">
<defs>
<path id="textPath" d="M50,100 C100,50 200,150 250,100" fill="none" />
</defs>
<path d="M50,100 C100,50 200,150 250,100"
stroke="#3498db" stroke-width="2" fill="none" />
<text font-family="Arial" font-size="16" fill="#2c3e50">
<textPath href="#textPath" startOffset="50%" text-anchor="middle">
Text along a curved path
</textPath>
</text>
</svg>
Result:
SVG Gradients and Filters
SVG supports advanced graphical effects like gradients and filters for creating visually rich graphics.
Linear Gradient Example
<svg width="200" height="150">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#3498db" />
<stop offset="100%" stop-color="#2ecc71" />
</linearGradient>
</defs>
<rect x="20" y="20" width="160" height="110"
fill="url(#grad1)" stroke="#2c3e50" stroke-width="2" rx="10" />
</svg>
Result:
Drop Shadow Filter
<svg width="200" height="150">
<defs>
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="4" dy="4" result="offsetBlur" />
<feFlood flood-color="rgba(0,0,0,0.5)" />
<feComposite in2="offsetBlur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<circle cx="100" cy="75" r="50" fill="#e74c3c" filter="url(#dropShadow)" />
</svg>
Result:
SVG Animations
SVG supports animations through SMIL (Synchronized Multimedia Integration Language) and CSS animations.
SMIL Animation
<svg width="300" height="150">
<rect x="20" y="20" width="50" height="50" fill="#3498db">
<animate attributeName="x" from="20" to="230"
dur="3s" repeatCount="indefinite" />
</rect>
<circle cx="150" cy="110" r="20" fill="#e74c3c">
<animate attributeName="r" from="10" to="30"
dur="1.5s" repeatCount="indefinite" />
</circle>
</svg>
Result:
CSS Animation
<style>
.spinning {
animation: spin 2s linear infinite;
transform-origin: center;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
</style>
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="#f1c40f" class="spinning" />
<text x="100" y="110" text-anchor="middle" font-family="Arial"
font-size="18" fill="#2c3e50" class="spinning">Spinning!</text>
</svg>
Result:
Practical Exercise: Create an SVG Infographic
Combine what you've learned to create an interactive infographic with SVG elements.