SVG (Scalable Vector Graphics) và HTML5 Canvas đều dùng để vẽ đồ họa trên web, nhưng có bản chất và trường hợp sử dụng hoàn toàn khác nhau.
So sánh chi tiết
| Tiêu chí | SVG | HTML5 Canvas |
|---|---|---|
| Bản chất | Vector (hình học: đường, hình tròn, path, text) | Raster/Bitmap (pixel) |
| Định dạng | XML (DOM elements) | JavaScript API (Immediate mode) |
| Scalability (Khả năng co giãn) | Tuyệt vời - VECTOR: phóng to vô hạn không mờ | Kém - PIXEL: phóng to bị mờ, răng cưa |
| Hiệu năng - Số lượng đối tượng | Tốt với ít đối tượng / bề mặt lớn | Tốt với nhiều đối tượng / bề mặt nhỏ (game, particle) |
| Sửa đổi (Modification) | Dễ dàng qua CSS & JS (DOM elements) | Chỉ qua JavaScript (vẽ lại toàn bộ) |
| Event Handling | Tự động trên từng element (click, hover path) | Phải tự implement hit-testing |
| Accessibility | Tốt (DOM, text selectable, screen reader) | Kém (chỉ là bitmap, cần ARIA thủ công) |
| In ấn (Print) | Chất lượng cao tại mọi độ phân giải | Cần canvas độ phân giải cao hoặc export PNG |
| Export | SVG file, PNG | PNG, JPEG, WebP (toDataURL/toBlob) |
| Animation | SMIL (deprecated), CSS, JS (GSAP) | JS game loop (requestAnimationFrame) |
Khi nào dùng SVG?
- Icon, logo, illustration vector.
- Biểu đồ, chart (Chart.js, D3.js dùng SVG).
- Bản đồ, sơ đồ kỹ thuật (CAD-like).
- Cần accessibility, SEO, in ấn chất lượng cao.
- Ít đối tượng, cần tương tác CSS (hover, transition).
Khi nào dùng Canvas?
- Game 2D (phát triển game, particle system).
- Xử lý ảnh real-time (filter, edit ảnh).
- Data visualization thời gian thực với hàng nghìn điểm (stock chart).
- Drawing app (vẽ tự do, chữ ký điện tử).
- Video processing, WebGL context.
Ví dụ SVG - Vẽ tròn
<svg width="200" height="200" xmlns="https://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" fill="blue" /> </svg>
Ví dụ Canvas - Vẽ chữ nhật
<canvas id="c" width="200" height="100"></canvas>
<script>
var ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0, 0, 300, 100);
</script>
Kết hợp cả hai
Nhiều app dùng SVG cho UI/icon + Canvas cho game/render nặng. Có thể vẽ SVG lên Canvas qua drawImage() (xem bài "Drawing SVG on Canvas").