SVG (viết tắt của Scalable Vector Graphics) là một ngôn ngữ đánh dấu (markup language) XML và dùng để miêu tả các hình ảnh đồ họa véc tơ hai chiều, tĩnh và hoạt hình, thường dành cho ứng dụng trên các trang mạng. SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML… Các tập tin có đuôi “.svg” được mặc định hiểu là tập tin SVG. SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ.

SVG

Các ưu điểm của SVG

Ưu điểm của việc sử dụng SVG thay vì các định dạng hình ảnh khác như JPG hay PNG.

  • SVG có thể được tạo hoặc chỉnh sửa bằng bất kì trình soạn thảo văn bản đơn giản nào.
  • SVG có thể được tìm kiếm, đánh dấu, nén và dùng script.
  • SVG có khả năng mở rộng.
  • SVG có thể in được với mọi chất lượng và mọi độ phân giải.
  • SVG có thể phóng to nhưng không vỡ ảnh.

Hầu như SVG được hỗ trợ trên tất cả các trình duyệt, tham khảo thêm: Tạo hình khối với SVG.

Các điểm khác nhau giữa SVG và Canvas

  • SVG là ngôn ngữ dùng để vẽ ảnh 2D bằng XML.
  • Canvas vẽ ảnh 2D bằng JavaScript.
  • SVG dựa trên XML nên mỗi yếu tố của nó đều tuân theo SVG DOM. Bạn có thể đính kèm JavaScript vào để xử lý sự kiện cho các yếu tố.
  • Trong SVG, mỗi hỉnh ảnh đều được xem là một đối tượng (Object) nên mỗi khi có thuộc tính nào thay đổi thì trình duyệt sẽ tự động thay đổi hình ảnh.
  • Canvas thì vẽ dựa trên pixel, có nghĩa là bạn vẽ xong một điểm ảnh thì trình duyệt sẽ lập tức quên nó ngay. Mỗi khi bạn thay đổi bất kì điểm nào của ảnh bạn đã vẽ thì bạn phải load lại toàn bộ ảnh để thể hiện sự thay đổi.

See the Pen lCEux by Chris Coyier (@chriscoyier) on CodePen.

So sánh giữa SVG và Canvas

Bản sau so sánh vài điểm khác nhau quan trọng giữa SVG và Canvas.

CanvasSVG
  • Phụ thuộc vào độ phân giải
  • Không hỗ trợ xử lý sự kiện.
  • Vẽ text kém.
  • Bạn có thể lưu kết quả vẽ dưới dạng png hay jpg.
  • Rất thích hợp cho các loại game nặng tính đồ họa.
  • Không phụ thuộc độ phân giải
  • Hõ trợ xử lý sự kiện
  • Rất thích hợp cho các ứng dụng vẽ ảnh to (google maps).
  • Vẽ chậm khi hình ảnh trỡ nên phức tạp.
  • Không thích hợp cho làm game.