SVG là gì?
SVG (Scalable Vector Graphics) là định dạng đồ họa vector dựa trên XML, dùng để mô tả hình ảnh 2D. Khác với PNG hay JPG (dựa trên pixel), SVG lưu thông tin dưới dạng hình học – vì vậy có thể phóng to không giới hạn mà không bị vỡ hình.
Ưu điểm của SVG
- Có thể chỉnh sửa trực tiếp bằng trình soạn thảo văn bản.
- Tìm kiếm được nội dung trong SVG (text-based).
- Cho phép thao tác bằng JavaScript hoặc CSS.
- In ấn sắc nét ở mọi độ phân giải.
- Kích thước nhẹ, dễ nén và tải nhanh.
SVG hiện được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Bạn có thể xem thêm: Tạo hình khối với SVG.
Khác biệt giữa SVG và Canvas
- SVG vẽ hình bằng XML, từng phần tử tồn tại như một đối tượng DOM riêng biệt.
- Canvas vẽ bằng JavaScript trên một vùng bitmap – không có DOM cho từng phần tử.
- SVG dễ thao tác từng phần tử (animation, sự kiện, style…), trong khi Canvas phù hợp với thao tác đồ họa nặng và game.
- SVG giữ lại thông tin hình học, Canvas chỉ giữ pixel tại thời điểm render.
Xem ví dụ trực quan tại CodePen của Chris Coyier.
See the Pen lCEux by Chris Coyier (@chriscoyier) on CodePen.
Bảng so sánh SVG và Canvas
| Canvas | SVG |
|---|---|
| Phụ thuộc độ phân giải | Không phụ thuộc độ phân giải |
| Không hỗ trợ DOM event | Hỗ trợ event DOM (click, hover…) |
| Text hiển thị kém | Phù hợp vẽ sơ đồ, biểu đồ, bản đồ |
| Có thể xuất ra PNG hoặc JPG | Hiệu suất giảm với hình phức tạp |
| Phù hợp làm game, hiệu ứng đồ họa realtime | Không phù hợp cho game |
Kết luận
SVG là lựa chọn lý tưởng cho các thiết kế vector đơn giản, logo, icon, biểu đồ, và các ứng dụng cần tương tác DOM. Nếu bạn cần tốc độ cao với đồ họa phức tạp như game hoặc animation real-time, Canvas sẽ phù hợp hơn. Nắm rõ điểm mạnh/yếu của từng định dạng sẽ giúp bạn chọn đúng công cụ cho từng tình huống.