SVG là viết tắt của Scalable Vector Graphics và 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ị. Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG.
Bạn có thể vẽ các hình dạng như hình tròn, hình chữ nhật, đường thẳng, v.v. bằng cách sử dụng SVG trong HTML5 một cách dễ dàng. Hãy xem một ví dụ để vẽ một hình chữ nhật bằng SVG.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để vẽ hình chữ nhật trong HTML5. Phần tử
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
<rect width="200" height="100" fill="green"/>
</svg>
</body>
</html> Đầu ra
