SVG trong html5 là một phần gắn liền với học lập trình php trong thiết kế web
Trong bài này chúng ta
sẽ tìm hiển về SVG căn bản trong HTML 5. Để bắt đầu vào bài học, các bạn nhớ ôn
lại kiến thức về Canvas trong HTML 5
1. Khái niệm SVG
SVG(Scalable Vector Graphics) chuẩn đồ hoạ vector có khả
năng mở rộng. Đối với đồ hoạ vector thì chúng ta thường biết đến đó là Adobe
Illustrator … ,hình ảnh được vẽ bằng vector thì có thể thoải mái phóng to mà không lo vị vỡ hạt như các định dạng hình ảnh thường. Với lợi
thế đó nên nó đã được đưa vào web. Tất nhiên, SVG đã được hỗ trợ trong HTML5.
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ìh ả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 text đơ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.
Các trình duyệt hỗ trợ SVG hầu như nó được hỗ trợ trên tất cả
các trình duyệt.
Nhúng SVG trực tiếp vào HTML
Trong HTML5, bạn có thể nhúng trực tiếp ảnh SVG vào
trang web. Các bạn copy đoạn code sau vào một file html rồi chạy thứ nhé. (Các
bạn sẽ thấy một ngôi sao 5 cánh rất đẹp)
1
2
3
4
5
6
7
8
9
|
<!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>
|
2. 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à 1 đố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 1 đ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.
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.
Canvas
|
SVG
|
·
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.
|
Như vậy qua bài viết này chắc các bạn đã hiểu cơ bản về SVG. Nó thực sự rất hiệu quả trong
viết thiết kế web vì chúng ta sẽ hạn chế sử dụng các hình ảnh dượi dạng JPG…sẽ
giúp cho web chúng ta có tốc độ load nhanh hơn và hiệu quả hơn. Chúc các bạn
thành công!
0 nhận xét:
Đăng nhận xét