SVG Trong HTML5 - WebVN

Trang chủ » Thẻ Svg Trong Html » SVG Trong HTML5 - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

SVG là gì?

  • SVG là viết tắt của Scalable Vector Graphics
  • SVG được sử dụng để vẽ đồ họa trên web
  • SVG là chuẩn chính thức của tổ chức web thế giới W3C

SVG rất được giới đồ họa ưu chuộng vì nó không phụ thuộc vào độ phân giải, hình có thể phóng to gấp nhiều lần mà không lo “vỡ”.

Thẻ SVG

Thẻ <svg> (đã được giới thiệu trong phần HTML5) được sử dụng làm 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, chữ và ảnh.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thẻ <SVG>:

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
SVG 4.0 3.0 9.0 3.2 10.0

Vẽ vòng tròn trong SVG

Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.

Code:

123456789101112 <!DOCTYPE html><html><body> <svg width="100"height="100"><circle cx="50"cy="50"r="40"stroke="green"stroke-width="4"fill="yellow"/>Rấttiếc,trình duyệtcủabạnkhônghỗtrợSVG.</svg> </body></html>

Demo

Vẽ hình chữ nhật trong SVG

Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.

Code:

123456789101112 <!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ấttiếc,trình duyệtcủabạnkhônghỗtrợSVG.</svg> </body></html>

Demo

Vẽ hình nhữ nhật bo góc trong SVG

Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.

Code:

123456789101112 <!DOCTYPE html><html><body> <svg width="400"height="180"><rectx="50"y="20"rx="20"ry="20"width="150"height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>Rấttiếc,trình duyệtcủabạnkhônghỗtrợSVG.</svg> </body></html>

Demo

Vẽ hình ngôi sao trong SVG

Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.

Code:

123456789101112 <!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ấttiếc,trình duyệtcủabạnkhônghỗtrợSVG.</svg> </body></html>

Demo

Vẽ logo SVG

SVG Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.

Code:

123456789101112131415161718192021 <!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ấttiếc,trình duyệtcủabạnkhônghỗtrợSVG.</svg> </body></html>

Demo

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ẽ đồ họa 2D với JavaScript.

SVG được 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 một thành phần của SVG.

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

Canvas được dựng lên bằng các pixel đứng cạnh nhau. Trong canvas, khi hình đã được dựng lên thì không còn thành phần nào được lưu trong trình duyệt. Nếu muốn thay đổi vị trí của một thành phần, bạn sẽ phải vẽ hình.

So sánh giữa SVG và Canvas

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

CanvasSVG
  • Phụ thuộc vào độ phân giải
  • Không hỗ trợ xử lý các sự kiện
  • Khả năng dựng hình cho chữ kém
  • 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 trò chơi có đồ họa chuyên sâu
  • Không phụ thuộc vào độ phân giải
  • Hỗ trợ xử lý các sự kiện
  • Phù hợp nhất với các ứng dụng dựng hình lớn (Google Maps)
  • Dựng hình chậm nếu đồ họa phức tạp (bất kể thứ gì sử dụng nhiều DOM đều bị chậm)
  • Không phù hợp với các ứng dụng game
« Bài TrướcBài Tiếp »

Từ khóa » Thẻ Svg Trong Html