Tìm hiểu SVG trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tìm hiểu SVG trong HTML5

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

SVG là gì?

  • SVG viết tắt của Scalable Vector Graphics
  • SVG được sử dụng để xác định đồ họa cho Web
  • SVG là một khuyến nghị của W3C

Phần tử <svg> trong HTML

Phần tử HTML <svg> là một vùng chứa đồ hoạ SVG. SVG có một số phương pháp để vẽ đường dẫn, hộp, vòng tròn, văn bản và hình ảnh đồ họa.

Trình duyệt hỗ trợ

Các con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <svg>.

Vòng tròn SVG

<!DOCTYPE html>
<html>
<body>

<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>

</body>
</html>

Hình chữ nhật SVG

<svg width=”400″ height=”100″>
<rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />
</svg>

Hình vuông góc tròn SVG

<svg width=”400″ height=”180″>
<rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />
</svg>

Ngôi sao SVG

<svg width=”300″ height=”200″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>

Logo SVG

<svg height=”130″ width=”500″>
<defs>
<linearGradient id=”grad1″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
<stop offset=”0%” style=”stop-color:rgb(255,255,0);stop-opacity:1″ />
<stop offset=”100%” style=”stop-color:rgb(255,0,0);stop-opacity:1″ />
</linearGradient>
</defs>
<ellipse cx=”100″ cy=”70″ rx=”85″ ry=”55″ fill=”url(#grad1)” />
<text fill=”#ffffff” font-size=”45″ font-family=”Verdana” x=”50″ y=”86″>SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

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

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML. Canvas vẽ đồ hoạ 2D, trực tiếp (với JavaScript).

SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong DOM của SVG. Bạn có thể đính kèm các trình xử lý sự kiện JavaScript cho một phần tử.

Trong SVG, mỗi hình vẽ được 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 render lại hình dạng.

Canvas được hiển thị pixel theo pixel. Trên canvas, một khi đồ họa được vẽ, nó sẽ bị lãng quên bởi trình duyệt. Nếu vị trí của nó cần được thay đổi, toàn bộ cảnh cần được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã được bao phủ bởi đồ hoạ.

Canvas   SVG
 Phụ thuộc độ phân giải  Độc lập về độ phân giải
 Không hỗ trợ xử lý sự kiện  Hỗ trợ cho các trình xử lý sự kiện
 Khả năng dựng hình văn bản kém  Thích hợp nhất cho các ứng dụng với các khu vực dựng hình lớn (Google Maps)
 Lưu hình ảnh kết quả dưới dạng .png hoặc .jpg  Rendering chậm nếu phức tạp (bất cứ thứ gì sử dụng DOM rất nhiều sẽ chậm)
 Thích hợp cho các trò chơi đồ họa chuyên sâu  Không phù hợp với các ứng dụng trò chơi