Thứ Hai, 23 tháng 12, 2013

HTML5 Inline SVG




HTML5 đã hỗ trợ cho nội tuyến SVG.

SVG là gì?

  • SVG là viết tắt của Scalable Vector Graphics
  • SVG được sử dụng để xác định đồ họa vector dựa trên cho các Web
  • SVG xác định ảnh theo định dạng XML
  • Đồ họa SVG KHÔNG mất bất kỳ chất lượng nếu chúng được thu nhỏ hoặc thay đổi kích cỡ
  • Mọi yếu tố và mỗi thuộc tính trong các tập tin SVG có thể được hoạt hình
  • SVG là một khuyến cáo của W3C

Ưu điểm SVG

Ưu điểm của việc sử dụng SVG hơn các định dạng hình ảnh khác (như JPEG và GIF) là:
  • Hình ảnh SVG có thể được tạo ra và chỉnh sửa với bất kỳ trình soạn thảo văn bản
  • Hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, kịch bản, và nén
  • Hình ảnh SVG được mở rộng
  • Hình ảnh SVG có thể được in với chất lượng cao ở độ phân giải bất kỳ
  • Hình ảnh SVG là zoomable (và hình ảnh có thể được thu nhỏ mà không làm giảm)

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9 +, Firefox, Opera, Chrome, và Safari hỗ trợ nội tuyến SVG.

Nhúng SVG trực tiếp vào trang HTML

Trong HTML5, bạn có thể nhúng các yếu tố SVG trực tiếp vào trang HTML của bạn:

Ví dụ

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <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>

Thử nó cho mình »

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

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML.
Vải vẽ đồ họa 2D, trên bay (với JavaScript).
SVG là dựa trên XML, có nghĩa là tất cả các yếu tố có sẵn trong SVG DOM. Bạn có thể đính kèm xử lý sự kiện JavaScript cho một phần tử.
Trong SVG, mỗi hình dạng được vẽ được nhớ đến như là một đối tượng. Nếu các thuộc tính của một đối tượng SVG được thay đổi, trình duyệt có thể tự động lại làm cho hình dạng.
Vải là ra từng pixel. Trong vải, một khi đồ họa được vẽ, nó bị lãng quên bởi trình duyệt. Nếu vị trí của nó nên được thay đổi, toàn bộ khung cảnh cần được vẽ lại, bao gồm cả các đối tượng mà có thể đã được bao phủ bởi các đồ họa.

So sánh Canvas và SVG

Bảng dưới đây cho thấy một số khác biệt quan trọng giữa Canvas và SVG:

CanvasSVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)