SVG nội tuyến HTML5

HTML5 hỗ trợ SVG-inline.

SVG là gì?

  • SVG là viết tắt của Scalable Vector Graphics (Hình ảnh véc-tơ có khả năng thay đổi kích thước)
  • SVG được sử dụng để định nghĩa các hình ảnh véc-tơ cho mạng
  • SVG sử dụng định dạng XML để định nghĩa hình ảnh
  • Hình ảnh SVG sẽ không mất chất lượng khi phóng to hoặc thay đổi kích thước
  • SVG là tiêu chuẩn của Tổ chức Web

Lợi thế của SVG

So với các định dạng hình ảnh khác (như JPEG và GIF), lợi thế của việc sử dụng SVG là:

  • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng trình chỉnh sửa văn bản
  • Hình ảnh SVG có thể được tìm kiếm, chỉ mục, viết kịch bản hoặc nén
  • SVG là co giãn
  • Hình ảnh SVG có thể được in ở bất kỳ độ phân giải nào với chất lượng cao
  • SVG có thể được phóng to mà không làm giảm chất lượng hình ảnh

Hỗ trợ trình duyệt

Internet Explorer 9, Firefox, Opera, Chrome và Safari hỗ trợ SVG trong dòng.

Chèn SVG trực tiếp vào trang HTML

Trong HTML5, bạn có thể chèn trực tiếp các phần tử SVG vào trang HTML:

Mô hình

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Thử ngay

Kết quả:

Giáo trình SVG

Nếu bạn muốn học thêm về SVG, hãy truy cập Giáo trình SVG.