HTML5 - SVG
SVG là viết tắt của Scan đảm 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 chủ yếu 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.
SVG đã trở thành Khuyến nghị của W3C 14. Tháng 1 năm 2003 và bạn có thể kiểm tra phiên bản mới nhất của đặc tả SVG tại Đặc điểm kỹ thuật SVG .
Xem tệp SVG
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. Người dùng Internet Explorer có thể phải cài đặt Adobe SVG Viewer để có thể xem SVG trong trình duyệt.
Nhúng SVG trong HTML5
HTML5 cho phép nhúng SVG trực tiếp bằng cách sử dụng <svg>...</svg> thẻ có cú pháp đơn giản sau:
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>Firefox 3.7 cũng đã giới thiệu một tùy chọn cấu hình ("about: config"), nơi bạn có thể bật HTML5 bằng các bước sau:
Kiểu about:config trên thanh địa chỉ Firefox của bạn.
Nhấp vào "Tôi sẽ cẩn thận, tôi hứa!" trên thông báo cảnh báo xuất hiện (và đảm bảo bạn tuân thủ nó!).
Kiểu html5.enable vào thanh bộ lọc ở đầu trang.
Hiện tại, nó sẽ bị vô hiệu hóa, vì vậy hãy nhấp vào nó để chuyển giá trị thành true.
Bây giờ trình phân tích cú pháp HTML5 của Firefox của bạn sẽ được bật và bạn sẽ có thể thử nghiệm với các ví dụ sau.
HTML5 - Vòng kết nối SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một vòng tròn bằng cách sử dụng thẻ <circle> -
<!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 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>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Hình chữ nhật SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình chữ nhật bằng cách sử dụng thẻ <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>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Dòng SVG
Sau đây là phiên bản HTML5 của ví dụ SVG sẽ vẽ một đường bằng thẻ <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ể dùng style thuộc tính này cho phép bạn thiết lập thông tin kiểu bổ sung như nét vẽ và màu tô, chiều rộng của nét vẽ, v.v.
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Ellipse
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình elip bằng cách sử dụng thẻ <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>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Đa giác SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một đa giác bằng cách sử dụng thẻ <polygon> -
<!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 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>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Polyline
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một polyline bằng cách sử dụng thẻ <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 = "red" />
</svg>
</body>
</html>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Gradients
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình elip bằng thẻ <ellipse> và sẽ sử dụng thẻ <radialGradient> để xác định một gradient xuyên tâm SVG.
Tương tự, bạn có thể sử dụng thẻ <linearGradient> để tạo độ dốc tuyến tính SVG.
<!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>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Star
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một ngôi sao bằng cách sử dụng thẻ <polygon>.
<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 Star</h2>
<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 = "red"/>
</svg>
</body>
</html>Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.