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 trang HTML
Đây là một ví dụ về đồ họa SVG đơn giản:
và đây là mã HTML:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Hãy tự mình thử »Giải thích mã SVG:
- Bắt đầu với phần tử gốc
<svg>
- Chiều rộng và chiều cao của hình ảnh SVG được xác định bằng thuộc tính
width
vàheight
- Vì SVG là một phương ngữ XML nên luôn liên kết chính xác không gian tên với thuộc tính
xmlns
- Không gian tên "https://www.w3.org/2000/svg" xác định các thành phần SVG bên trong tài liệu HTML
- Phần tử
<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 đường tròn. Nếu bị bỏ qua, 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 - Các thuộc tính
stroke
vàstroke-width
kiểm soát cách xuất hiện đường viền của hình. 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
fill
đề cập đến màu bên trong vòng tròn. Chúng tôi đặt màu tô thành màu vàng - Thẻ đóng
</svg>
đóng ảnh SVG
Lưu ý: Vì SVG được viết bằng XML nên hãy nhớ điều này:
- Tất cả các yếu tố phải được đóng đúng cách
- XML phân biệt chữ hoa chữ thường, vì vậy hãy viết tất cả các phần tử và thuộc tính SVG trong cùng một kiểu chữ. Chúng tôi thích chữ thường hơn
- Đặt tất cả các giá trị thuộc tính trong SVG bên trong dấu ngoặc kép (ngay cả khi chúng là số)
Một ví dụ SVG khác
Đây là một ví dụ khác về đồ họa SVG đơn giản:
và đây là mã HTML:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<svg
width="150" height="100" xmlns="https://www.w3.org/2000/svg">
<rect
width="100%" height="100%" fill="green" />
<circle cx="75" cy="50"
r="40" fill="yellow" />
<text x="75" y="60" font-size="30"
text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>
Hãy tự mình thử »Giải thích mã SVG:
- Bắt đầu với phần tử gốc
<svg>
, xác định chiều rộng và chiều cao cũng như không gian tên thích hợp - Phần tử
<rect>
dùng để vẽ hình chữ nhật - Chiều rộng và chiều cao của hình chữ nhật được đặt thành 100% chiều rộng/chiều cao của phần tử
<svg>
- Đặt màu tô của hình chữ nhật thành màu xanh lá cây
- Phần tử
<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 đường tròn - Thuộc tính
r
xác định bán kính của hình tròn - Chúng tôi đặt màu tô của hình tròn thành màu vàng
- Phần tử
<text>
được sử dụng để vẽ văn bản - Thuộc tính
x
vày
xác định tọa độ x và y của tâm văn bản - Thuộc tính
font-size
xác định kích thước phông chữ của văn bản - Thuộc tính
text-anchor
xác định vị trí chúng ta muốn đặt điểm giữa (của văn bản) - Thuộc tính
fill
xác định màu của văn bản - Viết "SVG" làm văn bản hiển thị
- Đóng hình ảnh SVG bằng
</svg>