SVG trong HTML
Bạn có thể nhúng các phần tử SVG trực tiếp vào các trang HTML của mình.
Nhúng SVG trực tiếp vào các trang HTML
Đây là một ví dụ về đồ họa SVG đơn giản:
và đây là mã HTML:
Thí dụ
<!DOCTYPE html>
<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>
Giải thích mã SVG:
- Hình ảnh SVG bắt đầu bằng phần tử <svg>
- Thuộc tính chiều rộng và chiều cao của phần tử <svg> xác định chiều rộng và chiều cao của hình ảnh SVG
- Phần tử <circle> được sử dụng để vẽ một vòng tròn
- Các thuộc tính cx và cy xác định tọa độ x và y của tâm đường tròn. Nếu cx và cy không được đặt, tâm của vòng tròn được đặt thành (0, 0)
- Thuộc tính r xác định bán kính của hình tròn
- Thuộc tính nét vẽ và độ rộng nét vẽ kiểm soát cách đường viền của một hình dạng xuất hiện. Chúng tôi đặt đường viền của hình tròn thành "đường viền" màu xanh lá cây 4px
- Thuộc tính tô màu đề cập đến màu sắc bên trong hình tròn. Chúng tôi đặt màu tô thành màu vàng
- Thẻ đóng </svg> đóng hình ảnh SVG
Lưu ý: Vì SVG được viết bằng XML, nên tất cả các phần tử phải được đóng đúng cách!