SVG là viết tắt của Scalable Vector Graphics và nó là ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được trình xem SVG hiển thị.
SVG hầu hết hữu ích cho các biểu đồ loại vectơ như biểu đồ hình tròn, biểu đồ hai chiều trong hệ tọa độ X, Y, v.v.
Để làm việc với Đồ họa vectơ có thể mở rộng (SVG) trong HTML5, hãy nhúng trực tiếp SVG bằng cách sử dụng thẻ với cú pháp sau -
Cú pháp
<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>
Để vẽ hình dạng trong HTML5 SVG, hãy sử dụng
- Phần tử
-
để vẽ một hình tròn.
Phần tử -
để vẽ hình chữ nhật.
Phần tử -
để vẽ một đường thẳng. -
phần tử để vẽ và hình elip.
Phần tử -
để vẽ một đa giác.
Bạn cũng có thể thêm SVG vào trang web bằng thẻ ,
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách làm việc với SVG trong HTML5. Chúng tôi sẽ vẽ một vòng tròn ở đây
Ví dụ
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG Circle</title> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg"> <circle id="greencircle" cx="60" cy="60" r="50" fill="green" /> </svg> </body> </html>