Hướng dẫn SVG

SVG là viết tắt của Scalable Vector Graphics.

SVG định nghĩa đồ họa dựa trên vectơ ở định dạng XML.


Ví dụ trong mỗi chương

Với trình chỉnh sửa "Hãy tự mình thử" của chúng tôi, bạn có thể chỉnh sửa SVG và nhấp vào nút để xem kết quả.

Ví dụ SVG

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Những gì bạn nên biết

Trước khi tiếp tục, bạn nên có một số hiểu biết cơ bản về những điều sau:

  • HTML
  • XML cơ bản

Nếu bạn muốn học những môn này trước, hãy tìm các hướng dẫn trên Trang chủ của chúng tôi .


SVG là gì?

  • SVG là viết tắt của Scalable Vector Graphics
  • SVG được sử dụng để xác định đồ họa dựa trên vectơ cho Web
  • SVG xác định đồ họa ở định dạng XML
  • Mọi phần tử và mọi thuộc tính trong tệp SVG đều có thể được làm động
  • SVG là một khuyến nghị của W3C
  • SVG tích hợp với các tiêu chuẩn W3C khác như DOM và XSL


SVG là một Khuyến nghị của W3C

SVG 1.0 trở thành Khuyến nghị của W3C vào ngày 4 tháng 9 năm 2001.

SVG 1.1 trở thành Khuyến nghị của W3C vào ngày 14 tháng 1 năm 2003.

SVG 1.1 (Phiên bản thứ hai) đã trở thành Khuyến nghị của W3C vào ngày 16 tháng 8 năm 2011.


Ưu điểm của SVG

Ưu điểm của việc sử dụng SVG so với các định dạng hình ảnh khác (như JPEG và GIF) là:

  • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào
  • Hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, tập lệnh và nén
  • Hình ảnh SVG có thể mở rộng
  • Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phân giải nào
  • Hình ảnh SVG có thể thu phóng
  • Đồ họa SVG KHÔNG làm mất bất kỳ chất lượng nào nếu chúng được thu phóng hoặc thay đổi kích thước
  • SVG là một tiêu chuẩn mở
  • Tệp SVG là XML thuần túy

Tạo hình ảnh SVG

Hình ảnh SVG có thể được tạo bằng bất kỳ trình soạn thảo văn bản nào, nhưng thường thuận tiện hơn khi tạo hình ảnh SVG bằng chương trình vẽ, như Inkscape .