HTML5 15 – Ảnh SVG trong HTML5

0
147

Trong bài này, chúng ta sẽ tìm hiểu về SVG và cách sử dụng SVG trên nền Website.

Ảnh SVG là gì?

SVG là viết tắt của từ (Scalable Vector Graphics), nó được vẽ bằng cách sử dụng ngôn ngữ đánh dấu kiểu như HTML. Nó đưa ra một số phương pháp để vẽ như các đường, hình tròn, ảnh, văn bản …

SVG nó là một loại ảnh vector, không dựa trên cơ sở pixel ảnh nên chất lượng ảnh không thay đổi khi phóng to hay thu nhỏ. SVG rất được giới đồ họa ưa chuộng vì nó không phụ thuộc vào độ phân giải, hình có thể phóng to gấp nhiều lần mà không lo “vỡ”.

Ưu điểm

  • Hình ảnh SVG có thể phóng to nhưng không vỡ ảnh.
  • Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phần giải nào.
  • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng javascript.
  • Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén,…
  • Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn.
  • Hìn ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác.
  • SVG hầu như nó được hỗ trợ trên tất cả các trình duyệt

Phần tử <svg>

Phần tử SVG, tương tự như Canvas là một vùng chứa cho các đồ họa. SVG cũng chứa vài phương thức để vẽ đường thẳng, hình hộp, đường tròn, văn bản và hình ảnh đồ họa.

Hỗ trợ trình duyệt

Đa số các trình duyệt phổ biến đều hỗ trợ svg như Chrome (4.0), Edge (9.0), Firefox (3.0), Safari (3.2) và Opera (10.1).

Nhúng SVG vào trang trong HTML5

HTML5 cho phép nhúng SVG trực tiếp sử dụng thẻ <svg>...</svg>

Cú pháp đơn giản như sau:

Sự khác nhau giữa Canvas và SVG trong HTML5

SVG là ngôn ngữ để mô tả đồ họa 2D trong XML. Trong khi đó, Canvas vẽ đồ họa 2D bằng ngôn ngữ JavaScript.

SVG dựa trên XML, nghĩa là mỗi phần tử đều sẵn có trong SVG DOM. Bạn có thể gắn kèm các xử lý sự kiện JavaScript cho một phần tử nào đó. Trong SVG, mỗi hình vẽ được xem là 1 đối tượng. Nếu các thuộc tính của một đối tượng thay đổi, trình duyệt có thể tự động vẽ lại hình vẽ đó.

Canvas được hiển thị theo từng pixel một. Trong canvas, khi một đồ họa được vẽ thì sẽ xóa khỏi bộ nhớ trình duyệt. Nếu vị trí của đồ họa này thay đổi, toàn bộ cần phải vẽ lại, bao gồm các đối tượng có thể bị bao phủ bởi đồ họa đó.

Bảng sau chỉ ra một số điểm khác nhau quan trọng giữa Canvas và SVG:

Canvas SVG
Phụ thuộc độ phân giải Không phụ thuộc độ phân giải
Không hỗ trợ xử lý sự kiện Hỗ trợ xử lý sự kiện
Khả năng vẽ chữ kém Thích hợp cho việc vẽ các khung hình lớn( Google Map)
Bạn có thể lưu ảnh đã vẽ dưới dạng .png hoặc .jpg Vẽ chậm nếu hình phức tạp( Cứ dính đến DOM là làm cái phức tạp sẽ chậm)
Thích hợp cho cho các trò chơi sử dụng đồ họa Không thích hợp làm game đồ họa

Kết luận

Như vậy, bài này tôi đã giới thiệu cho các bạn về SVG trong HTML5, những khái niệm đầu tiên, cú pháp sử dụng và sự khác nhau so với Canvas. Ở bài sau, tôi sẽ hướng dẫn các bạn cụ thể cách thức xây dựng các hình ảnh SVG trong HTML5.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây