Thẻ svg trong HTML

Thẻ svg trong HTML
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ử

Các thuộc tính quan trọng của thẻ svg trong HTML

Để hiển thị và điều khiển hình ảnh vector chính xác, thẻ svg hỗ trợ nhiều thuộc tính khác nhau. Trong đó, một số thuộc tính đóng vai trò quan trọng trong việc xác định kích thước, vùng hiển thị và khả năng tương thích của tệp SVG trên trình duyệt.

Thuộc tính width và height

Hai thuộc tính width và height dùng để xác định chiều rộng và chiều cao của vùng hiển thị SVG. Giá trị có thể sử dụng đơn vị như px, %, em hoặc các đơn vị CSS hợp lệ khác.

Khi không khai báo kích thước phù hợp, hình ảnh SVG có thể hiển thị không đúng tỷ lệ hoặc chiếm không gian ngoài ý muốn. Với thiết kế đáp ứng (Responsive), nhiều trường hợp chỉ cần đặt một trong hai thuộc tính kết hợp với CSS để hình ảnh tự co giãn.

<svg width="300" height="150">
  ...
</svg>

Thuộc tính viewBox

viewBox xác định hệ tọa độ và vùng nội dung được hiển thị bên trong SVG. Đây là thuộc tính quan trọng giúp hình ảnh có thể phóng to, thu nhỏ mà vẫn giữ nguyên tỷ lệ.

Giá trị của viewBox gồm bốn tham số theo thứ tự:

  • Điểm bắt đầu theo trục X.
  • Điểm bắt đầu theo trục Y.
  • Chiều rộng vùng hiển thị.
  • Chiều cao vùng hiển thị.
<svg width="300" height="200" viewBox="0 0 300 200">
  ...
</svg>

Việc thiết lập viewBox đúng cách giúp SVG hiển thị đẹp trên nhiều kích thước màn hình mà không cần tạo nhiều phiên bản khác nhau.

Thuộc tính xmlns

Thuộc tính xmlns khai báo không gian tên XML của SVG, giúp trình duyệt nhận biết tài liệu đang sử dụng chuẩn SVG.

Thuộc tính này đặc biệt cần thiết khi SVG được viết trực tiếp trong tệp độc lập hoặc nhúng vào tài liệu HTML theo một số trường hợp nhất định.

<svg xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

Việc khai báo đúng xmlns góp phần đảm bảo khả năng tương thích giữa các trình duyệt và công cụ xử lý SVG.

Khi nào nên dùng CSS thay cho thuộc tính SVG

Một số thuộc tính như màu sắc, kích thước hoặc hiệu ứng có thể được thiết lập trực tiếp trong SVG hoặc thông qua CSS. Nếu mục tiêu là dễ bảo trì và tái sử dụng, CSS thường là lựa chọn phù hợp hơn.

Nên ưu tiên CSS khi:

  • Muốn thay đổi giao diện cho nhiều SVG cùng lúc.
  • Cần tạo hiệu ứng hover hoặc animation.
  • Muốn đồng bộ màu sắc với giao diện website.
  • Cần dễ dàng chỉnh sửa mà không phải thay đổi mã SVG.

Ngược lại, các thuộc tính liên quan đến cấu trúc như viewBox hoặc xmlns nên được khai báo trực tiếp trong thẻ svg để đảm bảo hình ảnh hoạt động chính xác.

Lời kết

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

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực | Founder Web Mới
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
Đánh giá
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 *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !