Thẻ HTML <svg>
Thí dụ
Vẽ một vòng tròn:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <svg>xác định vùng chứa cho đồ họa SVG.
SVG có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và hình ảnh đồ họa.
Để tìm hiểu thêm về SVG, vui lòng đọc Hướng dẫn về SVG của chúng tôi .
Hỗ trợ trình duyệt
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Các ví dụ khác
Thí dụ
Vẽ một hình chữ nhật:
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Thí dụ
Vẽ một hình vuông với các góc được làm tròn:
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Thí dụ
Vẽ một ngôi sao:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78
10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Thí dụ
Vẽ biểu trưng SVG:
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"
/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
</svg>
Các trang liên quan
Hướng dẫn HTML: HTML SVG
Hướng dẫn SVG: Hướng dẫn SVG