HTML5 SVG inline

HTML5 hỗ trợ SVG-inline.

SVG là gì?

  • SVG là viết tắt của Scalable Vector Graphics (Hình ảnh vector có thể mở rộng)
  • SVG được sử dụng để định nghĩa các hình ảnh vector dựa trên 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 hình ảnh khi phóng to hoặc thay đổi kích thước
  • SVG là tiêu chuẩn của Tổ chức tiêu chuẩn Internet

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 bao gồm:

  • 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 yếu 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ử trực tiếp

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.