Intermediate LevelHTML & Semantic Web
What are the key differences between HTML5 <canvas> and SVG graphics?
❓ Interview Prompt: Compare Canvas 2D raster bitmap rendering vs SVG resolution-independent vector graphics objects.
1. HTML5 '<canvas>':
•
Raster / Bitmap: Renders pixels on a 2D context using JavaScript drawing commands.
•
Performance: High performance for thousands of animated objects (games, data visualizations, charts).
•
DOM: No individual object DOM nodes. Images pixelate when zoomed.
2. SVG (Scalable Vector Graphics):
•
Vector: Defined via XML DOM nodes ('<circle>', '<path>').
•
Resolution Independent: Scales infinitely without quality loss.
•
DOM: Each SVG element is a DOM node accepting CSS styles, event listeners, and accessibility labels.
Code Implementation Example
html
<!-- Resolution-independent vector graphic -->
<svg width="100" height="100" viewBox="0 0 100 100" aria-label="Green Checkmark">
<circle cx="50" cy="50" r="40" fill="green" />
</svg>
<!-- Raster pixel drawing canvas -->
<canvas id="game-canvas" width="800" height="600"></canvas>💡Comparing SVG vector graphic markup vs HTML5 Canvas element.
🎯 Interview Key Takeaway
Use SVG for scalable UI icons and resolution-independent graphics; use Canvas for high-performance pixel drawing and 2D/3D games.
#canvas#svg#Graphics#Intermediate
Back to all HTML & Semantic Web Questions→