40. SVG Trong HTML

SVG trong HTML: SVG (Scalable Vector Graphics) là một định dạng đồ họa dựa trên XML cho phép bạn tạo ra các hình ảnh vector có khả năng tự điều chỉnh kích thước mà không bị mất chất lượng. Trong HTML, bạn có thể sử dụng thẻ <svg> để nhúng đồ họa SVG vào trang web.

Dưới đây là một ví dụ đơn giản về cách sử dụng thẻ <svg> để tạo một hình tròn trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Example</title>
</head>
<body>
    <h1>SVG Example</h1>
    
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
</body>
</html>

Trong ví dụ trên:

Chúng ta đã sử dụng thẻ <svg> để bọc toàn bộ nội dung SVG.
width và height xác định kích thước của khung vẽ SVG.
<circle> là một phần tử SVG để vẽ một hình tròn.
cx và cy là tọa độ tâm của hình tròn.
r là bán kính của hình tròn.
fill là màu sắc của hình tròn.

Bạn có thể tạo các hình dạng phức tạp hơn, điểm ảnh, dòng vẽ và nhiều yếu tố đồ họa khác bằng cách sử dụng các phần tử SVG khác nhau. SVG cũng hỗ trợ các hiệu ứng, biến đổi và tương tác với JavaScript để tạo ra các trải nghiệm đa dạng trên trình duyệt.

Dưới đây là một ví dụ về cách sử dụng SVG để vẽ một biểu đồ cột đơn giản trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Bar Chart Example</title>
</head>
<body>
    <h1>SVG Bar Chart Example</h1>
    
    <svg width="400" height="300">
        <rect x="50" y="250" width="50" height="50" fill="blue" />
        <rect x="150" y="200" width="50" height="100" fill="green" />
        <rect x="250" y="150" width="50" height="150" fill="red" />
    </svg>
</body>
</html>

Trong ví dụ trên:

Chúng ta sử dụng thẻ <svg> để tạo khung vẽ SVG có chiều rộng 400 và chiều cao 300.
Ba phần tử <rect> là các hình chữ nhật biểu thị các cột của biểu đồ cột.
Thuộc tính x và y xác định vị trí của góc trái trên của hình chữ nhật.
Thuộc tính width xác định chiều rộng của hình chữ nhật biểu thị cột.
Thuộc tính height xác định chiều cao của hình chữ nhật biểu thị cột.
Thuộc tính fill xác định màu sắc của cột.

Bạn có thể điều chỉnh kích thước, vị trí và màu sắc của các hình chữ nhật để tạo biểu đồ cột tùy ý. Điều này chỉ là một ví dụ đơn giản về cách sử dụng SVG để vẽ đồ họa trong HTML.

Leave a Comment Cancel Reply