Việc hiển thị hình ảnh trên nhiều màn hình có kích thước khác nhau là một vấn đề đau đầu bởi việc sử dụng CSS thường rất tốn thời gian và công sức. Thay vào đó, thủ thuật SVG trong HTML lại rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy SVG là gì? Hãy cùng tìm hiểu ngay nhé!

1. Thẻ SVG trong HTML5 là gì?

SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.

Xem thêm bài viết về HTML:

- Tìm hiểu thẻ IMG trong HTML và hướng dẫn cách chèn ảnh trong HTML

- Các cách phổ biến để nhúng CSS vào HTML

- Thẻ <a> trong HTML

2. Cách nhúng thẻ SVG vào HTML5

Để nhúng một hình ảnh SVG vào trang web, chúng ta làm như sau:

<svg width="100" height="100">
  //Chúng ta thiết lập hình vẽ tại đây
</svg>

3. Một số ví dụ

3.1 Vẽ hình tròn bằng thẻ circle

<svg width="180" height="180">
    <circle cx="80" cy="80" r="50" fill="green" stroke="yellow"/>
</svg>

Kết quả:

Trong đó:

  • cx là vị trí tâm, tính từ mép trái của SVG
  • cy là vị trí tâm, tính từ mép trên
  • r là bán kính
  • fill dùng để xác định màu tô
  • stroke dùng để vẽ đường biên

3.2 Vẽ hình vuông bằng thẻ rect

<svg width="340" height="340">
    <rect width="300" height="300"  x="20" y="20" fill="red" />
</svg>

Kết quả:

3.3 Vẽ hình elip bằng thẻ ellipse

<svg height="100" width="200">
    <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:red" />
</svg>

Kết quả:

3.4 Vẽ các đoạn thẳng

<svg width="220" height="60">
    <line x1="30" y1="10" x2="200" y2="50"
          style="stroke: green; stroke-linecap:round; stroke-width:20;"  />
</svg>

Kết quả: 

3.5 Vẽ đường gấp khúc

<svg width="130" height="160">
    <polyline
            points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
            fill="#F9F38C" stroke="green" stroke-width="6" />
</svg>

Kết quả: 

3.6 Vẽ logo Stringee

<!DOCTYPE html>
<html>
<body>
    <!-- html svg tag is used here -->
    <svg height="300" width="700">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%"
                            x2="100%" y2="0%">
                <stop offset="0%"
                    style="stop-color:white;
                            stop-opacity: 1" />
                <stop offset="100%"
                    style="stop-color: red;
                            stop-opacity: 1" />
            </linearGradient>
        </defs>
        <ellipse cx="160" cy="100" rx="120"
                ry="80" fill="url(#grad1)" />
        <text fill="#ffffff" font-size="22"
            font-family="ARIAL" x="120" y="110">
            Stringee
        </text>
    </svg>
</body>
</html>

Kết quả:

Stringee

Tổng kết

Như vậy, chúng ta đã tìm hiểu về cách sử dụng SVG trong HTML. Với khả năng tùy chỉnh cao và tích hợp được với CSS và JavaScript, bạn có thể tạo ra trải nghiệm người dùng độc đáo và đầy sáng tạo. 

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: