HTML5: Cách sử dụng SVG


Khóa học qua video:
Python C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

SVG là gì?

Ø  SVG là ba ký tự viết tắt của cụm từ tiếng Anh: Scalable Vector Graphics

Ø  SVG cho phép định nghĩa đồ họa vector trên các trang Web

Ø  SVG định nghĩa đồ họa theo định dạng XML

Ø  Các hiệu ứng đồ họa bằng SVG sẽ không bị ảnh hưởng về chất lượng ngay cả khi bạn zoom hoặc thay đổi kích thước trình duyệt

Ø  Có thể tạo các hiệu ứng hoạt ảnh trên tất cả các phần tử cũng như thuộc tính của các file SVG

Ø  SVG là một chuẩn của W3C

Ưu điểm của SVG

Ø  Các ảnh SVG có thể được tạo và chỉnh sửa với bất kỳ trình soạn thảo nào

Ø  Các ảnh SVG có thể được tìm kiếm, đánh chỉ mục, được lập trình và nén lại

Ø  Các ảnh SVG hoàn toàn có thể mớ rộng

Ø  Các ảnh SVG có thể được in với chất lượng hình ảnh rất cao ở bất kỳ độ phân giải nào

Ø  Các ảnh SVG có thể được zoom mà không làm thay đối chất lượng ảnh

Trình duyệt hỗ trợ    

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ SVG.
 

Bạn có thể nhúng SVG trực tiếp vào trang HTML.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;">

</svg>

</body>

</html>

Sự khác biệt giữa <SVG> và <Canvas>

SVG được coi là một ngôn ngữ dùng để mô tả đồ họa 2D trong XML. Canvas dùng để vẽ đồ họa 2D bằng JavaScript.

SVG dựa trên XML, có nghĩa là mọi phần tử đều có thể được chấp nhận trong SVG DOM. Bạn có thể đưa thêm các xử lý sự kiện JavaScript vào mỗi phần tử. Trong SVG, mỗi hình dạng được vẽ sẽ được nhớ lại và được coi là một đối tượng. Vì vậy nếu có phần nào đó của một đối tượng này thay đổi thì trình duyệt sẽ tự động tạo lại hình dạng của phần đó mà không ảnh hưởng đến những phần khác của đối tượng.

Còn đối với Canvas thì hình ảnh được vẽ trên từng điểm ảnh, và sau khi hình ảnh được vẽ xong thì trình duyệt sẽ không nhớ lại nó. Vì vậy nếu vị trí của hình ảnh thay đổi thì toàn bộ Canvas cũng như bản thân nó phải được vẽ lại.

So sánh Canvas và SVG

Bảng dưới đây sẽ cho thấy những điểm khác biệt giữa <Canvas> và <SVG>:

Canvas

SVG

Phụ thuộc độ phân giải của màn hình

Không phụ thuộc độ phân giải của màn hình

Không hỗ trợ xử lý sự kiện

Hỗ trợ xử lý sự kiện

Việc vẽ văn bản là khó khăn

Rất thích hợp cho các ứng dụng có diện tích dựng hình lớn (Google Maps chẳng hạn)

Có thể lưu trữ ảnh với phần mở rộng là .png hoặc .jpg

Thao tác vẽ sẽ bị chậm bởi việc sử dụng DOM

Rất thích hợp cho việc viết các ứng dụng game

Không phù hợp cho việc viết các ứng dụng game

 

» Tiếp: Định vị địa lý (Geolocation)
« Trước: Gradient với <canvas>
Khóa học qua video:
Python C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!