Trong quá trình xây dựng và phát triển trang web, SVG và Canvas đều là những công nghệ cần thiết, hỗ trợ vẽ nội dung trong trình duyệt web. Để tìm hiểu về các công cụ này, hãy theo dõi bài viết dưới đây nhé!
Trong quá trình xây dựng và phát triển trang web, chúng ta phải tìm hiểu sâu về các kỹ thuật xử lý bên trong để trang web hiện đại và tối ưu hóa nhằm đáp ứng nhu cầu ngày càng khắt khe trong thời đại công nghệ số như hiện nay. Cụ thể, trên trang web mà chúng ta đang hướng đến có logo bằng hình ảnh sử dụng điểm ảnh(pixel) hoặc vector. Nếu sử dụng điểm ảnh thì khi trang web được trình chiếu trên điện thoại hoặc máy tính bàn, ảnh có thể bị vỡ hoặc không đúng kích thước trình diễn. Tuy nhiên, với ảnh sử dụng vector, chúng ta sẽ tiết kiệm được không gian bộ nhớ, độ nét của ảnh cao, không bị vỡ điểm ảnh, tốc độ tải ảnh nhanh. Với vector, chúng ta có thể sử dụng SVG. Còn làm Game trên HTML thì hầu hết sử dụng Canvas (điểm ảnh) để thực hiện.
Có thể thấy, SVG và Canvas đều là công nghệ có thể vẽ nội dung trong trình duyệt web, vì vậy cần so sánh và tìm hiểu kỹ khi nào sử dụng, điều này giúp chúng ta có thể dễ dàng lựa chọn cái này hơn cái kia khá rõ ràng. Vì ậy trước khi hiểu sâu về SVG và Canvas, chúng ta cần phải tìm hiểu cụ thể hơn về công nghệ HTML5, XML, JavaScript.
HTML 5 là gì?
HTML5 là ngôn ngữ lập trình được phát triển dựa trên nền tảng ngôn ngữ HTML. Thành phần quan trọng nhất của nó vẫn là WWW (World Wide Web). HTML5 được sử dụng để thiết kế cấu trúc của website. HTML5 hỗ trợ tối đa cho các ứng dụng đa phương tiện trên website. Đồng thời, chúng vẫn có những cải tiến hỗ trợ và giúp cho website thân thiện hơn với người dùng, thiết bị, các chương trình máy tính, và các trình duyệt web,…
XML là gì?
XML là từ viết tắt của từ Extensible Markup Language là ngôn ngữ đánh dấu mở rộng. XML có chức năng truyền dữ liệu và mô tả nhiều loại dữ liệu khác nhau. Tác dụng chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các nền tảng và các hệ thống được kết nối thông qua mạng Internet.
XML được dùng để cấu trúc, lưu trữ và trao đổi dữ liệu giữa các ứng dụng và dữ liệu. Ví dụ khi ta xây dựng một ứng dụng bằng Php và một ứng dụng bằng Java thì hai ngôn ngữ này không thể hiểu nhau, vì vậy ta sẽ sử dụng XML để trao đổi dữ liệu. Chính vì vậy, XML có tác dụng rất lớn trong việc chia sẻ, trao đổi dữ liệu giữa các hệ thống.
JavaScript là gì?
JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác, được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.
JavaScript cũng là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng, nằm trong ba ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp, bạn có thể nhìn tổng quan như sau:
- HTML: Cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website.
- CSS: Được sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…
- JavaScript: Tạo nên những nội dung động trên website.
SGV là gì?
SVG là chữ viết tắt của Scalable Vector Graphics. Là đồ họa dựa trên vectơ và được sử dụng định dạng dựa trên XML cho đồ họa cung cấp hỗ trợ để tương tác. Hình ảnh SVG tốt hơn hình ảnh bitmap. Trong hình ảnh SVG, hình ảnh vectơ bao gồm một tập hợp các hình dạng cố định và trong khi chia tỷ lệ các hình ảnh này, nó vẫn giữ nguyên hình dạng của ảnh.
Nói nôm na, SVG giống như một chương trình “vẽ”. Bản vẽ được chỉ định là hướng dẫn vẽ cho từng hình dạng và bất kỳ phần nào của bất kỳ hình dạng nào cũng có thể được thay đổi. Bản vẽ được định hướng hình dạng.
Canvas là gì?
Canvas là một phần tử HTML, được sử dụng để vẽ đồ họa trên trang web. Nó được gọi là bitmap với giao diện lập trình ứng dụng đồ họa chế độ tức thì để vẽ trên đó. Phần tử canvas được sử dụng làm vùng chứa cho đồ họa. Trong Canvas, chúng ta cần javascript để vẽ đồ họa.
Canvas giống như một chương trình “vẽ”. Khi các pixel chạm vào màn hình, đó là bản vẽ. Chúng ta không thể thay đổi hình dạng của bản vẽ ngoại trừ bằng cách ghi đè chúng bằng các pixel khác. Các bức tranh được định hướng theo pixel.
Như vậy, có thể thay đổi bản vẽ là rất quan trọng đối với một số chương trình; ví dụ: soạn thảo ứng dụng, công cụ lập sơ đồ,… Vì vậy, SVG có lợi thế hơn. Khả năng kiểm soát các pixel riêng lẻ rất quan trọng đối với một số chương trình có tính nghệ thuật. Có được hiệu suất hoạt hình tuyệt vời để thao tác người dùng thông qua thao tác kéo chuột dễ dàng hơn với Canvas so với SVG.
Một pixel trên màn hình máy tính thường sẽ tiêu tốn 4 byte thông tin và một màn hình máy tính ngày nay mất vài megabyte. Vì vậy, Canvas có thể bất tiện nếu bạn muốn cho phép người dùng chỉnh sửa hình ảnh và sau đó tải lên lại.
Ngược lại, vẽ một số hình dạng bao phủ toàn bộ màn hình bằng SVG sẽ chiếm vài byte, tải xuống nhanh chóng và có thể được tải lên lại một cách dễ dàng với cùng các lợi thế đi theo hướng đó như khi nó đi theo hướng khác. Vì vậy, SVG có thể nhanh hơn Canvas. Tiếp theo, Google triển khai Google Maps với SVG. Điều đó mang lại cho ứng dụng web hiệu năng nhanh và cuộn mượt mà.
Tóm lại chúng ta có bảng so sánh sự khác nhạu giữa Canvas và SVG để áp dụng kỹ thuật cho viết hình thành trang web sau này:
|
CANVAS |
SVG |
|
|
Bạn đã phân biệt được định nghĩa và cách sử dụng của SVG và Canvas rồi chứ? Hãy thực hành thật nhiều với hai công nghệ này để thành công trong xây dựng và phát triển trang web nhé! Chúc các bạn học tốt!
Giảng viên Lê Thiện Nhật Quang
Bộ môn CNTT – FPT Mạng cá cược bóng đá Đà Nẵng
