[HTML/HTML5] Phần 40: Phần tử SVG trong HTML5

Cập nhật lần cuối: 06/06/2018 lúc 17:43:46

Thể loại: HTML/HTML5

Trong bài này, chúng ta sẽ tìm hiểu về SVG và cách sử dụng SVG trên nền Web thông qua các ví dụ.

Khái niệm SVG

SVG là từ viết tắt cho cụm từ “Scalable Vector Graphics”, tạm dịch là “Đồ họa Vector có khả năng mở rộng” là một ngôn ngữ đánh dấu dùng để định nghĩa các đồ họa trên web. SVG cũng là một đề xuất của W3C.

Phần tử SVG

Phần tử SVG, tương tự như Canvas là một vùng chứa cho các đồ họa. SVG cũng chứa vài phương thức để vẽ đường thẳng, hình hộp, đường tròn, văn bản và hình ảnh đồ họa.

Hỗ trợ trình duyệt

Đa số các trình duyệt phổ biến đều hỗ trợ svg như Chrome (4.0), Edge (9.0), Firefox (3.0), Safari (3.2) và Opera (10.1).

Các ví dụ

Trước hết, bạn phải định nghĩa vùng chứa svg với kích thước chiều rộng và chiều cao. Sau đó, tiến hành vẽ các đồ họa trong vùng chứa.

Vẽ đường tròn

Đường tròn được vẽ thông qua phần tử circle với các thuộc tính: cx, cy là tọa độ tâm; r là bán kính; stroke là màu viền; strole-width là độ rộng viền; và fill là màu cần tô bên trong đường tròn.

<!DOCTYPE html>
<html>
<body>

<svg width="250" height="250">
  <circle cx="100" cy="100" r="90"
  stroke="blue" stroke-width="3" fill="pink" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG --- dammio.com.
</svg>
 
</body>
</html>

Vẽ hình chữ nhật

Tương tự hình chữ nhật cũng có chiều rộng và cao với phong cách định nghĩa trong thuộc tính style.

<svg width="400" height="200">
  <rect width="400" height="200" style="fill:pink;stroke-width:15;stroke:violet" />
</svg>

Vẽ hình chữ nhật bo tròn 4 góc

<svg width="400" height="200">
  <rect x="50" y="20" rx="20" ry="20" width="170" height="170"
  style="fill:yellow;stroke:green;stroke-width:5;opacity:0.5" />
</svg>

Vẽ hình sao

Để vẽ hình sao, bạn có thể dùng phần tử polygon và định nghĩa 5 điểm đỉnh của ngôi sao.

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

Vẽ logo

Ví dụ này kết hợp các phương thức vẽ hình ellipse, vẽ văn bản và vẽ Gradient.

<svg height="500" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:lightblue;stop-opacity:1" />
      <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="100" rx="175" ry="70" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="100" y="116">DAMMIO</text>
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG --- dammio.com.
</svg>

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

SVG là ngôn ngữ để mô tả đồ họa 2D trong XML. Trong khi đó, Canvas vẽ đồ họa 2D bằng ngôn ngữ JavaScript.

Liên quan: [HTML/HTML5] Phần 31: Các phần tử Form

SVG dựa trên XML, nghĩa là mỗi phần tử đều sẵn có trong SVG DOM. Bạn có thể gắn kèm các xử lý sự kiện JavaScript cho một phần tử nào đó. Trong SVG, mỗi hình vẽ được xem là 1 đối tượng. Nếu các thuộc tính của một đối tượng thay đổi, trình duyệt có thể tự động vẽ lại hình vẽ đó.

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

So sánh Canvas và SVG

Bảng sau chỉ ra một số điểm khác nhau quan trọng giữa Canvas và SVG:

Canvas	SVG
Phụ thuộc độ phân giải Không hỗ trợ các xử lý sự kiện Khả năng hiển thị văn bản không cao (mờ). Bạn có thể lưu tập tin kết quả hình ảnh dưới dạng .png hay jpg Thích hợp các trò chơi đồ họa chuyên sâu	Độc lập với độ phân giải Hỗ trợ các xử lý sự kiện Thích hợp cho các ứng dụng với vùng hiển thị lớn (Google Maps) Chậm hiển thị nếu phức tạp Không thích hợp cho các ứng dụng trò chơi

Kết luận

Như vậy bạn đã học và tìm hiểu về SVG với các ví dụ minh họa trong bài này. Để vẽ đồ họa các hình phức tạp bằng SVG, bạn phải tìm hiểu thêm 1 series về SVG sẽ được viết ở DAMMIO trong thời gian sắp tới. Mời bạn theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [HTML/HTML5] Phần 40: Phần tử SVG trong HTML5. https://www.dammio.com/2018/06/01/html-html5-phan-40-phan-tu-svg-trong-html5.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 40: Phần tử SVG trong HTML5}, year = {2018}, url = {https://www.dammio.com/2018/06/01/html-html5-phan-40-phan-tu-svg-trong-html5}, urldate = {2025-03-21} }

Kết nối