Thẻ svg trong HTML

• Bùi Tấn Lực
• 23
• 30/09/2025

Thẻ svg trong HTML dùng để nhúng trực tiếp mã nguồn XML của SVG vào bên trong thẻ, định dạng đồ họa vector dựa trên XML, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ svg trong HTML

Chức năng của Thẻ svg trong HTML

Thẻ svg trong HTML dùng để nhúng trực tiếp mã nguồn XML của SVG vào bên trong thẻ, định dạng đồ họa vector dựa trên XML, cho phép mô tả hình ảnh bằng các công thức toán học thay vì pixel như ảnh bitmap, hình ảnh sẽ không bị mờ khi zoom to lên.

Ở ví dụ mình chú thích px cho dễ hình dung nhưng thực chất nó là định dạng đồ họa vector.

Code Thẻ svg trong HTML

Thẻ svg nhúng hình tròn trong HTML

<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 100px, chiều cao svg: 100px-->
<svg width="100" height="100">
  <!--Tọa độ x cách tâm hình tròn 50px, Tọa độ y cách tâm hình tròn 45px, nền đỏ, màu border đen, chiều rộng border 4px -->
  <circle cx="50" cy="45" r="40" stroke="black" stroke-width="4" fill="red" />
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>

Chạy Thử

Thẻ svg nhúng hình vuông, hình chữ nhật trong HTML

<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 400px, chiều cao svg: 100px-->
<svg width="400" height="100">
 <!--Chiều rộng 300px, chiều cao 50px, nền đỏ,border 5px màu đen, border-radius:4px, cách left: 10px, cách top:15px -->
 <rect x="10" y="15" width="300" rx="4" ry="4" height="50" style="fill:red;stroke-width:5;stroke:black" />
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>

Chạy Thử

Thẻ svg nhúng hình đa giác trong HTML

<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 300px, chiều cao svg: 200px-->
<svg width="300" height="200">
 <!--x1,y1 x2,y2 đến xn,yn-->
 <!--100,10 là góc thứ nhất, 40,198 góc thứ 2-->
 <!--Nền màu đỏ, border rộng 5px màu đen, fill-rule:evenodd số lần một đường kẻ từ điểm cắt qua đường dẫn là số chẳn sẽ được tô màu, lẻ không được tô màu-->
 <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;" />
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>

Chạy Thử

Thẻ svg nhúng hình và chữ trong HTML

<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 500px, chiều cao svg: 130px-->
<svg width="500" height="130">
  <defs>
    <!--Tạo màu nền để gắn vào fill của ellipse-->
    <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>
  <!--Tạo hình ellipse, gắn màu nền từ id grad1-->
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <!--Chữ màu trắng, left:50px, top:86px, kích thước chữ 45px, font Verdana-->
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ svg trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ svg trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn