HTML5 - SVG
Bài đăng này đã không được cập nhật trong 3 năm
I. HTML5 SVG là gì?
SVG là viết tắt của Scalable Vector Graphics. Là một ngôn ngữ để mô tả đồ họa 2D và các ứng dụng đồ họa trong XML và XML sau đó được trả lại bởi một SVG Viewer.
SVG trở thành một W3C Recommendation từ 14/1/2003 và bạn có thể kiểm tra phiên bản mới nhất của nó tại: SVG Specification.
Ưu điểm
- Hình ảnh SVG có thể phóng to nhưng không vỡ ảnh.
- Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phần giải nào.
- Hình ảnh SVG có thể được tạo và chỉnh sửa bằng javascript.
- Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén,…
- Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn.
- Hìn ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác.
- SVG hầu như nó được hỗ trợ trên tất cả các trình duyệt
II. Nhúng SVG trong HTML5
HTML5 cho phép nhúng SVG trực tiếp bởi sử dụng thẻ <svg>...</svg> mà có cú pháp đơn giản sau:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
HTML5 − Đường tròn SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một vòng tròn sử dụng tag <circle>:
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
Kết quả:
HTML5 − Hình chữ nhật SVG
Ví dụ SVG vẽ một hình chữ nhật sử dụng tag <rect>:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>
kết quả:
HTML5 − SVG Line
Ví dụ SVG vẽ một đường thẳng sử dụng tag <line>:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
Bạn có thể sử dụng thuộc tính style mà cho phép bạn thiết lập thông tin style bổ sung như nét, màu, độ rộng của nét, …
Kết quả:
HTML5 − SVG Ellipse
Ví dụ SVG vẽ một hình Ellipse sử dụng tag <ellipse>:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>
HTML5 − SVG Polygon
Ví dụ SVG vẽ một hình đa giác sử dụng tag <polygon>:
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>
Nó sẽ cho kết quả
HTML5 − SVG Polyline
Ví dụ SVG vẽ một hình nhiều mặt sử dụng tag <polyline>:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="green" />
</svg>
</body>
</html>
Kết Quả:
HTML5 − SVG Gradients
Ví dụ sử dụng tag <radialGradient>:
Với cách tương tự, bạn có thể sử dụng thẻ <linearGradient> để tạo SVG Linear Gradient:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
</svg>
</body>
</html>
Kết quả:
HTML5 − SVG Star
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 >HTML5 SVG Star</h2>
<div style="background:red; width:250px; padding-top:20px; padding-left: 100px">
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow"/>
</svg>
</div>
</body>
</html>
Kết quả:
III. Các điểm khác nhau giữa SVG và Canvas
Bảng sau so sánh vài điểm khác nhau quan trọng giữa SVG và Canvas.
HTML5 giới thiệu hai thành phần đồ họa là Canvas và SVG nhưng chúng lại có nhiều điểm khác nhau. Nắm được sự khác nhau đó sẽ giúp các bạn sử dụng chúng hiệu quả hơn.
| Canvas | SVG |
|---|---|
| Phụ thuộc vào độ phân giải | Không phụ thuộc độ phân giải |
| Không hỗ trợ xử lý sự kiện. | Hõ trợ xử lý sự kiện |
| Thành phần HTML đơn tương tự thẻ,trong hành xử | Nhiều thành phầ đồ học, trở thành một phần của DOM |
| Chỉ chỉnh sửa qua script | Chỉnh sửa qua script và css |
| Kéo giãn vỡ chất lượng | Kéo giãn vẫn giữ chất lượng tốt |
| Dựa trên pixel | Dựa trên vector |
Link demo : https://jsfiddle.net/tuanvh/07dwstee/6/
Tham khảo: Tutorialspoint.com
All rights reserved
