HTMLKhác nhau ở cái browser giữ lại sau khi vẽ.
- Canvas — bitmap. Bạn vẽ pixel bằng JS, vẽ xong browser không nhớ hình gì đã vẽ.
- SVG — mỗi hình là một DOM node, có thể style bằng CSS, gắn event listener, thay đổi qua JS.
html
<canvas id="c" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d')
ctx.fillStyle = '#2563eb'
ctx.fillRect(10, 10, 100, 60) // vẽ xong là quên, muốn đổi màu phải vẽ lại
</script>
<svg width="300" height="150">
<rect x="10" y="10" width="100" height="60" fill="#2563eb" />
</svg>
<!-- rect là element thật: querySelector, addEventListener, CSS hover đều dùng được -->| Canvas | SVG | |
|---|---|---|
| Nhiều đối tượng (10k+) | tốt | chậm, DOM phình |
| Zoom | vỡ | nét |
| Bắt sự kiện trên từng hình | tự tính toạ độ | có sẵn |
| Accessibility / SEO | gần như không | đọc được |
Chọn thế nào: game, particle, xử lý ảnh, biểu đồ realtime nhiều điểm → Canvas. Icon, logo, biểu đồ tương tác vài chục phần tử → SVG.