HTML5 SVG

HTML5 SVG

SVG là gì?

SVG là viết tắt của Scalable Vector Graphics (một định dạng hình ảnh, tương tự như JPG, PNG,…) sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector.

Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.

Phần tử HTML <svg>

Phần tử HTML <svg> là bộ chứa cho đồ họa SVG.

SVG có nhiều phương thức để vẽ các đường thẳng, hình hộp, hình tròn, văn bản, và hình ảnh.

SVG hình tròn

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" />
</svg>

</body>
</html>

SVG hình chữ nhật

Ví dụ

<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>

SVG hình chữ nhật bo tròn

Ví dụ

<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>

SVG ngôi sao

Ví dụ

<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>

SVG Logo

Ví dụ

<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>

Khác biệt giữa SVG là Canvas

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

Canvas vẽ đồ họa 2D, nhanh chóng (với Javascript)

SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong SVG DOM. 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 dạng được vẽ được ghi nhớ như một đối tượng. Nếu các thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động kết xuất lại hình dạng.

Canvas được hiển thị theo từng pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt quên đi. Nếu vị trí của nó phải đượ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 đồ họa.

So sánh giữa Canvas và SVG

Canvas	SVG
Phụ thuộc vào độ phân giải Không hỗ trợ bộ xử lý sự kiện Khả năng render văn bản hạn chế Có thể lưu thành hình ảnh dạng .png hoặc .jpg Thích hợp để vẽ đồ họa cho game	Không phụ thuộc vào độ phân giải Hỗ trợ trình xử lý sự kiện Thích hợp cho các ứng dụng có khu vực render lớn (Google Maps) Render(kết xuất hình ảnh) chậm nếu phức tạp Không thích hợp cho các ứng dụng game

Tags:

Bài viết liên quan

HTML Youtube Videos

HTML Plug-ins (Trình hỗ trợ)

Âm thanh trong HTML5

HTML5 Video

Multimedia trong HTML

HTML5 Canvas

Quy ước và phong cách viết HTML5

Chuyển đổi sang HTML5

Các phần tử ngữ nghĩa trong HTML5

Các phần tử mới trong HTML5