Bài 36: Phần tử SVG trong HTML5

SVG là gì?

  • SVG là tên viết tắt của Scalable Vector Graphics
  • SVG được sử dụng để vẽ giao diện đồ họa trên các trang Web
  • SVG là chuẩn chính thức của W3C

Phần tử <svg> trong HTML

Phần tử <svg> trong HTML (đã được giới thiệu trong các bài học về HTML5) là khung bao ngoài cho đồ họa.

SVG có một vài phương thức để vẽ như: đường thẳng, hình hộp, hình tròn, văn bản và hình ảnh đồ họa.


Các trình duyệt hỗ trợ

Dưới đây là bảng giới thiệu các phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các phần tử <svg>.

Phần tử  icon_chrome icon_ie  icon_firefox icon_safari icon_opera
<svg> 4.0 9.0 3.0 3.2 10.1

Cách vẽ vòng tròn trong SVG

-font-b-Cute-b-font-soft-magnetic-white-colour-circle-photo-font-b-frame-b

Ví dụ:


<!DOCTYPE html>
<html>
<body><svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg></body>
</html>

Cách vẽ hình chữ nhật trong SVG

shop1

Ví dụ:


<!DOCTYPE html>
<html>
<body><svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg></body>
</html>

Cách vẽ hình chữ nhật bo góc trong SVG

rectangle-34969_960_720

Ví dụ


<!DOCTYPE html>
<html>
<body>

<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" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg>

</body>
</html>

Cách vẽ hình ngôi sao trong SVG

images

Ví dụ:


<!DOCTYPE html>
<html>
<body><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;" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg></body>
</html>

Cách vẽ Logo trong SVG

images

Ví dụ:


<!DOCTYPE html>
<html>
<body>

<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>
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg>

</body>
</html>

Điểm khác nhau giữa SVG và Canvas

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML.

Canvas vẽ đồ họa 2D với JavaScript.

SVG được xây dựng dựa trên XML nên tất cả các thành phần đều có sẵn trong SVG DOM. Bạn có thể dùng javascript để xử lý các sự kiện trên cho phần tử SVG.

Trong SVG, mỗi hình được vẽ được lưu trữ như một đối tượng. Nếu các thuộc tính của một đối tượng SVG thay đổi, trình duyệt sẽ tự động trả kết quả.

Canvas được  hiển thị dưới dạng các pixel đứng cạnh nhau. Trong canvas, khi một hình đã được vẽ, nó sẽ không được nhớ bởi trình duyệt. Nếu vị trí của hình muốn thay đổi thì toàn bộ hình sẽ cần phải vẽ lại bao gồm cả các đối tượng xung quanh đối tượng đồ hoạ này.


So sánh giữa Canvas và SVG

Bảng so sánh dưới đây sẽ chỉ ra cho ta thấy một vài điểm khác biệt quan trọng giữa Canvas và SVG:

Canvas SVG
  • Phụ thuộc vào độ phân giải
  • Không hỗ trợ trong việc xử lí các sự kiện
  • Khả năng tạo hình cho văn bản không tốt
  • Bạn có thể lưu hình sau khi vẽ dưới dạng .png hoặc .jpg
  • Rất thích hợp cho các game đồ họa
  • Không phụ thuộc vào độ phân giải
  • Hỗ trợ trong việc xử lí các sự kiện
  • Phù hợp với các ứng dụng xây dựng hình ảnh rộng (Google Maps)
  • Xây dựng hình ảnh chậm nếu đồ họa phức tạp (Tất cả những gì sử dụng nhiều DOM đều bị chậm)
  • Không phù hợp với các ứng dụng game

Có thể bạn sẽ thích…

Trả lời

EnglishVietnamese