SVG trong HTML

Bạn có thể chèn đối tượng SVG trực tiếp vào trang HTML.

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

Dưới đây là một ví dụ đơn giản về hình ảnh SVG:

Xin lỗi, trình duyệt của bạn không hỗ trợ SVG trong nội bộ.

Đây là mã HTML:

<!DOCTYPE html>
<html>
<body>
<h1>SVG đầu tiên của tôi</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Thử ngay

Giải thích mã SVG:

  • Hình ảnh SVG bắt đầu từ đối tượng <svg>
  • Thuộc tính width và height của đối tượng <svg> xác định độ rộng và độ cao của hình ảnh SVG
  • Đối tượng <circle> được sử dụng để vẽ hình tròn
  • Thuộc tính cx và cy xác định tọa độ x và y của tâm hình tròn. Nếu không thiết lập cx và cy, tâm hình tròn sẽ được đặt tại (0, 0)
  • Thuộc tính r xác định bán kính của hình tròn
  • Thuộc tính stroke và stroke-width điều chỉnh cách hiển thị đường viền của hình dạng. Chúng ta sẽ thiết lập đường viền của hình tròn là xanh lá cây có độ dày 4 pixel
  • Thuộc tính fill thiết lập màu sắc trong hình tròn. Chúng ta sẽ thiết lập màu sắc để được màu vàng
  • Đóng thẻ </svg> để đóng ảnh SVG

Lưu ý: Do SVG được viết bằng XML, vì vậy tất cả các phần tử đều phải được đóng lại một cách chính xác!