HTML <svg> thẻ

Định nghĩa và cách sử dụng

<svg> thẻ định nghĩa hộp chứa hình ảnh SVG.

SVG có nhiều phương pháp để vẽ các đường dẫn, khung, hình tròn, văn bản và hình ảnh đồ họa.

Nếu bạn muốn học thêm về SVG, hãy đọc Hướng dẫn SVG。

Xin xem thêm:

Hướng dẫn HTML:HTML SVG

Hướng dẫn SVG:Hướng dẫn SVG

Mô hình

Ví dụ 1

Vẽ hình tròn:

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

Thử ngay

Ví dụ 2

Vẽ hình vuông:

<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ử ngay

Ví dụ 3

Vẽ hình vuông có góc 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ử ngay

Ví dụ 4

Vẽ 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ử ngay

Ví dụ 5

Vẽ logo 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>

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1