SVG trong HTML5 SVG là viết tắt của Scalable Vector Graphics và nó 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.. SV
Trang 1SVG trong HTML5
SVG là viết tắt của Scalable Vector Graphics và nó 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 phần lớn hữu ích cho các sơ đồ kiểu vecto như các biểu đồ Pie, các đồ thị hai chiều trong hệ tọa độ X, Y,
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
Quan sát các SVG file
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 sử dụng IE có thể phải cài đặt Adobe SVG Viewer để có thể quan sát SVG trên trình duyệt
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>
Firefox 3.7 cũng đã giới thiệu một tùy chọn cấu hình (about:config), từ đây bạn có thể kích hoạt tính năng HTML5 bởi sử dụng các bước sau:
• Nhập about:config trong thanh địa chỉ Firefox
• Nhấn nút "I'll be careful, I promise!" trên hộp cảnh báo xuất hiện (và đảm bảo là bạn đồng ý với nó!)
• Nhập html5.enable vào trong thanh lọc tại đầu trang
• Hiện tại nó sẽ là disable, vì thế nhấn nó để chuyển giá trị thành true
Bây giờ Firefox HTML5 Parser sẽ được kích hoạt và bạn có thể trải nghiệm các ví dụ sau:
Trang 2HTML5 − Đườ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 thẻ
<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" = "50" fill = "red" /> </svg> </body> </html>
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã 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 mà sẽ vẽ một hình chữ nhật sử dụng thẻ
<rect>:
<!DOCTYPE html> <html> <head> <title> SVG </title> <meta
charset = "utf-8" /> </head> <body> <h2> 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>
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:
Trang 3HTML5 − Đường thẳng SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một đường thẳng bởi sử dụng
thẻ <line>:
<!DOCTYPE html> <html> <head> <title> SVG </title> <meta
charset = "utf-8" /> </head> <body> <h2> 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 : " /> </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, …
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:
HTML5 − Hình SVG Elip
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một Elip bởi sử dụng thẻ
<ellipse> tagtrong Thư viện C:
Trang 4<!DOCTYPE html> <html> <head> <title> SVG </title> <meta
charset = "utf-8" /> </head> <body> <h2> 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>
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:
HTML5 − Hình đa giác SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một đa giác bởi sử dụng thẻ
<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ả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:
HTML5 − Hình nhiều mặt (polyline) SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một hình nhiều mặt bởi sử dụng thẻ <polyline>:
Trang 5<!DOCTYPE html> <html> <head> <title> SVG </title> <meta
charset = "utf-8" /> </head> <body> <h2> 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>
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:
HTML5 − Hình SVG Gradients
Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một elip bởi sử dụng thẻ
<ellipse> và sẽ sử dụng thẻ <radialGradient> để định nghĩa một SVG Radial Gradient:
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> <title> SVG </title> <meta
charset = "utf-8" /> </head> <body> <h2> 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%" = "50%" fx = "50%" fy = "50%" > <stop offset = "0%" style = stop - color : rgb ( 200 , 200 , 200 ); stop - opacity : " /> <stop offset = "100%" style = stop - color : rgb ( , , 255 ); stop - opacity : " />
Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5: