SVG Integration & Canvas Basics
18 min read
SVGinline SVGCanvas APIvector vs raster2D contextaccessibility
SVG vs Canvas: Choosing the Right Graphics Technology
| Feature | SVG | Canvas |
|---|---|---|
| Type | Vector (DOM-based) | Raster (pixel-based) |
| Scaling | Infinite (no pixelation) | Pixelates when enlarged |
| Event handling | Per-element events | Manual hit detection |
| Animation | CSS + SMIL | requestAnimationFrame |
| DOM overhead | High (each shape is a node) | None (just pixels) |
| Accessibility | Built-in (title, desc, ARIA) | Manual (aria-label on canvas) |
| Best for | Icons, logos, charts (<1000 elements) | Games, data viz (1000+ elements) |
SVG Integration Methods
- Inline SVG: Full CSS/JS control. Best for icons and interactive graphics.
- <img src="icon.svg">: Cached, no JS/CSS access. Best for static images.
- CSS background-image: Decorative only. No accessibility.
Making SVG Accessible
Use <title> for short description and <desc> for detailed description. Add role="img" and aria-labelledby.