- Tham gia
- 28/02/2015
- Bài viết
- 16,833
- Được Like
- 12,691
Tìm hiểu kiến thức cơ bản SVG trong HTML5
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ể tha hồ phóng to mà không sợ hiện tượng vỡ hạt như các định dạng hình ảnh thông thường khác. Và vì ưu điểm của nó, nên nó đã có thể đượ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ình ảnh khác như (JPG hay PNG).
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)
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.
Như vậy qua bài viết này chắc các bạn đã hiểu cơ bản về SVG trong HTML5 rồi chứ. 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.
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ể tha hồ phóng to mà không sợ hiện tượng vỡ hạt như các định dạng hình ảnh thông thường khác. Và vì ưu điểm của nó, nên nó đã có thể đượ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ì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 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.
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)
Mã:
<!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>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.
Chúc các bạn thành công.
Nguồn: tuhocphp.com
Bài viết liên quan
Bài viết mới
