Luận văn Tìm hiểu SVG và ứng dụng

SV ne t.vn TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM HUỲNH NGỌC ĐỒN - 0112083 LÊ ANH TỒN - 0112074 TÌM HIỂU SVG VÀ ỨNG DỤNG LUẬN VĂN CỬ NHÂN TIN HỌC GIÁO VIÊN HƯỚNG DẪN TS DƯƠNG ANH ĐỨC Th.S LÊ THỤY ANH NIÊN KHĨA 2001 - 2005 SV ne t.vn i NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... SV ne t.vn ii NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... SV ne t.vn iii LỜI CÁM ƠN Chúng em xin chân thành cám ơn Khoa Công Nghệ Thông Tin, trường Đại Học Khoa Học Tự Nhiên TpHCM đã tạo điều kiện tốt cho chúng em thực hiện đề tài luận văn tốt nghiệp này. Chúng em xin chân thành cám ơn Thầy Dương Anh Đức và Thầy Lê Thụy Anh đã tận tình hướng dẫn, chỉ bảo chúng em trong suốt thời gian thực hiện đề tài. Chúng em xin chân thành cám ơn quý Thầy Cô trong Khoa đã tận tình giảng dạy, trang bị cho chúng em những kiến thức quý báu trong những năm học vừa qua. Chúng con xin nói lên lòng biết ơn sâu sắc đối với Ông Bà, Cha Mẹ đã chăm sóc, nuôi dạy chúng con thành người. Xin chân thành cám ơn các anh chị và bạn bè đã ủng hộ, giúp đỡ và động viên chúng em trong thời gian học tập và nghiên cứu. Mặc dù chúng em đã cố gắng hoàn thành luận văn trong phạm vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi những thiếu sót. Chúng em kính mong nhận được sự cảm thông và tận tình chỉ bảo của quý Thầy Cô và các bạn. Nhóm thực hiện Huỳnh Ngọc Đoàn và Lê Anh Toàn 07/2005 SV ne t.vn iv LỜI NĨI ĐẦU Sự phát triển của Internet đang vươn tới mọi ngĩc ngách trong đời sống kinh tế, xã hội. Các ứng dụng của Internet đang làm cho cuộc sống ngày hồn thiện hơn, rút ngắn khoảng cách về khơng gian. Các cơng ty lớn trên thế giới đang chuyển hướng cơng nghệ của mình vào siêu xa lộ thơng tin. Họ ra sức phát triển các cơ sở hạ tầng, các ứng dụng, các dịch vụ giá trị gia tăng và các chuẩn mực. Nếu nhà phát triển nào tạo ra một chuẩn mực tốt thì sẽ chiếm lĩnh được thị trường, lật đổ những chuẩn mực trước đĩ. Sự phát triển cơng nghệ cho Internet đang thu hút các tổ chức, các cơng ty ra sức áp đặt các chuẩn mực riêng của mình lên ngành cơng nghiệp này. Hệ quả là thế giới đã chứng kiến nhiều sự thay đổi chuẩn mực, kèm theo đĩ là phí tổn khi phải chuyển đổi từ định dạng theo chuẩn cũ sang định dạng của chuẩn mới. Một những sự chuyển đổi đĩ là sự chuyển đổi từ các định dạng ảnh quét này sang định dạng ảnh quét khác, chuyển từ định dạng ảnh quét sang định dạng ảnh véc-tơ. Khi các ảnh đã được mơ tả bằng véc-tơ, các hệ nến, các trình soạn thảo và các ứng dụng địi hỏi phải cĩ một hệ thống quy ước chung để xử lý. Một loạt các chuẩn véc-tơ đã ra đời nhưng đều là các định dạng độc quyền của từng cơng ty. Từ năm 1999, chuẩn đồ họa véc-tơ SVG đã ra đời đánh dấu sự hợp nhất của các cơng ty trong việc xử lý đồ họa véc-tơ. Sự xuất hiện của SVG đã dẫn đến một loạt ứng dụng đã ra đời, tận dụng được những ưu điểm của chuẩn này. Trong các ứng dụng của SVG, ứng dụng bản đồ là thể hiện rõ nhất tính ưu việt của SVG. Như vậy tại sao khơng tận dụng SVG và GIS để tạo ra một chương trình tìm kiếm đường đi trên bản đồ? SV ne t.vn v Với ý tưởng trên, chúng em đã chọn và tập trung phát triển đề tài “Tìm hiểu SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa véc-tơ”. Nội dung của luận văn được chia làm 5 chương như sau: Chương 1. Mở đầu: giới thiệu vai trị của đồ họa véc-tơ và GIS. Dẫn nhập khả năng sử dụng SVG kết hợp GIS để tạo bản đồ, l ý do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được. Chương 2. Các vấn đề tổng quan: khái quát về chuẩn véc-tơ cho bản đồ, các định dạng véc-tơ thơng dụng hiện nay và minh họa bằng các ví dụ đơn giản, mơ hình đối tượng tài liệu DOM, ngơn ngữ XML, cũng như trình bày về những điều cơ bản nhất của hệ thống thơng tin địa lý GIS. Chương 3. Cấu trúc định dạng tập tin SVG: trình bày chi tiết về SVG, các thành phần chính thường được sử dụng trong đặc tả SVG, kiến trúc nội vi SVG, kiến trúc ứng dụng SVG. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG: trình bày các vấn đề liên quan trực tiếp đến việc xây dựng ứng dụng. Chương 5. Tổng kết: tĩm lại các vấn đề đã giải quyết và nêu ra một số hướng phát triển trong tương lai. SV ne t.vn vi MỤC LỤC Chương 1 Mở đầu ............................................................................................... 14 1.1 Vai trị của đồ họa véc-tơ trong ứng dụng bản đồ ......................................... 14 1.2 Mục tiêu của đề tài ......................................................................................... 15 Chương 2 Các vấn đề tổng quan ....................................................................... 16 2.1 Tổng quan về chuẩn véc-tơ cho bản đồ ......................................................... 16 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ .................................................. 16 2.1.1.1 Chuẩn chính thức........................................................................ 16 2.1.1.2 Chuẩn bất thành văn ................................................................... 17 2.1.2 Các định dạng của véc-tơ....................................................................... 18 2.1.2.1 SVF............................................................................................. 18 2.1.2.2 DWF ........................................................................................... 20 2.1.2.3 Flash (cịn gọi là SWF)............................................................... 21 2.1.2.4 PGML ......................................................................................... 22 2.1.2.5 WebCGM.................................................................................... 23 2.1.2.6 VML ........................................................................................... 24 2.1.2.7 PDF............................................................................................. 27 2.1.2.8 SVG ............................................................................................ 30 2.1.2.9 VRML......................................................................................... 36 2.1.2.10 HGML ........................................................................................ 37 2.1.2.11 DrawML ..................................................................................... 38 2.1.3 Mơ hình DOM ....................................................................................... 39 2.1.4 Ngơn ngữ XML ..................................................................................... 40 2.1.5 Tổng quan về GIS.................................................................................. 42 2.1.5.1 Khái niệm GIS? .......................................................................... 42 2.1.5.2 Các thành phần của GIS ............................................................. 42 2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thơng tin dữ liệu GIS ......................... 42 2.1.5.4 Chức năng của GIS..................................................................... 42 2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS............................... 42 Chương 3 Cấu trúc định dạng tập tin SVG...................................................... 44 3.1 Định nghĩa...................................................................................................... 44 3.2 Sự tương thích với các chuẩn khác ................................................................ 44 3.3 Loại MIME của SVG và Khơng gian tên SVG ............................................ 46 3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh:.. 46 3.3.2 Khơng gian tên SVG, định danh cơng cộng và định danh hệ thống: .... 47 3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’ ....................... 47 3.4.1 Tổng quan: ............................................................................................. 47 3.4.2 Thành phần ‘svg’: .................................................................................. 50 3.5 Gom nhĩm : thành phần ‘g’: .......................................................................... 52 SV ne t.vn vii 3.6 Tham chiếu và thành phần ‘defs’:.................................................................. 53 3.6.1 Tổng quan: ............................................................................................. 53 3.6.2 Các thuộc tính tham chiếu URI: ............................................................ 57 3.6.3 Thành phần ‘defs’ .................................................................................. 58 3.7 Thành phần ‘desc’ và ‘title’: .......................................................................... 59 3.8 Thành phần ‘symbol’: .................................................................................... 62 3.9 Thành phần ‘use’:........................................................................................... 62 3.10 Thành phần ‘image’: ...................................................................................... 74 3.11 Các hình cơ bản.............................................................................................. 77 3.11.1 Hình chữ nhật – thành phần ‘rect’ ......................................................... 77 3.11.2 Hình trịn – thành phần ‘circle’.............................................................. 79 3.11.3 Hình e-lip – thành phần ‘ellipse’ ........................................................... 79 3.11.4 Đường thẳng – thành phần ‘line’........................................................... 81 3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ ............................................ 82 3.11.6 Đa giác – thành phần ‘polygon’ ............................................................ 83 3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo ....................................... 84 3.12.1 Giới thiệu ............................................................................................... 84 3.12.2 Khung nhìn ban đầu............................................................................... 85 3.12.3 Hệ trục toạ độ ban đầu........................................................................... 87 3.12.4 Các phép biến đổi hệ trục toạ độ ........................................................... 88 3.12.5 Thuộc tính ‘transform’........................................................................... 95 3.12.6 Thuộc tính ‘viewBox’............................................................................ 97 3.12.7 Thuộc tính ‘preserveAspectRatio’....................................................... 100 3.12.8 Thiết lập khung nhìn............................................................................ 106 3.13 Định kiểu (styling) ....................................................................................... 108 3.13.1 Các thuộc tính định kiểu của SVG ...................................................... 108 3.13.2 Định kiểu dùng thuộc tính trình diễn................................................... 108 3.13.3 Định kiểu bằng CSS............................................................................. 109 3.13.4 Thành phần ‘style’ .............................................................................. 112 3.13.5 Thuộc tính ‘class’ ................................................................................ 112 3.13.6 Phạm vi của trang định kiểu: ............................................................... 113 3.14 Đường xén.................................................................................................... 114 3.14.1 Giới thiệu: ............................................................................................ 114 3.14.2 Đường xén ban đầu.............................................................................. 114 3.14.3 Thuộc tính ‘overflow’ và ‘clip’ .......................................................... 114 3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’ ...... 116 3.14.5 Thiết lập đường xén mới...................................................................... 117 3.15 Thành phần ‘path’ ........................................................................................ 121 3.15.1 Giới thiệu ............................................................................................. 121 3.15.2 Thành phần ‘path’................................................................................ 121 3.15.3 Dữ liệu đường (path data)................................................................... 121 3.16 Thành phần ‘text’ ......................................................................................... 122 3.16.1 Giới thiệu ............................................................................................. 122 SV ne t.vn viii 3.16.2 Thành phần ‘text’................................................................................. 123 3.16.3 Thuộc tính thiết lập phơng chữ cho thành phần ‘text’......................... 126 3.16.4 Thuộc tính canh lề ............................................................................... 127 3.16.5 Thành phần ‘tspan’ .............................................................................. 128 3.16.6 Thành phần ‘tref’ ................................................................................. 131 3.17 Vẽ chữ dọc theo một đường......................................................................... 132 3.17.1 Giới thiệu: ............................................................................................ 132 3.17.2 Thành phần ‘textPath’.......................................................................... 133 3.18 Khả năng ảnh động của SVG - thành phần ‘animate’ ................................. 138 3.18.1 Giới thiệu ............................................................................................. 138 3.18.2 Các thành phần ảnh động..................................................................... 139 3.18.2.1 Tổng quan ................................................................................. 139 3.18.2.2 Mối quan hệ của ảnh động SVG với SMIL Animation............ 139 3.18.3 Ví dụ ảnh động: ................................................................................... 141 3.19 Viết script (kịch bản).................................................................................... 142 3.19.1 Chỉ định ngơn ngữ viết script .............................................................. 142 3.19.1.1 Chỉ định ngơn ngữ viết script mặc định ................................... 142 3.19.1.2 Khai báo cục bộ ngơn ngữ viết script ....................................... 143 3.19.2 Thành phần ‘script’.............................................................................. 143 3.19.3 Quản lý sự kiện.................................................................................... 146 3.19.4 Thuộc tính sự kiện ............................................................................... 146 3.19.5 ECMAScript và DOM ......................................................................... 148 3.19.5.1 Lấy đối tượng tài liệu ............................................................... 148 3.19.5.2 Lấy thành phần gốc................................................................... 148 3.19.5.3 Tạo một node trong cây tài liệu................................................ 148 3.19.5.4 Xĩa một thành phần ra khỏi thành phần cha của nĩ................. 149 3.19.5.5 Thiết lập thuộc tính sự kiện ...................................................... 149 3.19.5.6 Thiết lập bộ lắng nghe sự kiện.................................................. 149 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 151 4.1 Các kĩ thuật và cơng nghệ ............................................................................ 151 4.2 WMS ............................................................................................................ 151 4.3 WFS ............................................................................................................. 152 4.4 GEOSERVER .............................................................................................. 154 4.5 Kiến trúc ứng dụng ...................................................................................... 155 4.6 Client-side .................................................................................................... 156 4.7 Server- side .................................................................................................. 156 4.8 Sơ đồ tương tác chi tiết giữa client và server............................................... 158 4.8.1 Mơ tả chi tiết client .............................................................................. 159 4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client............................. 159 4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client ................... 159 4.8.1.3 Tìm đường đi từ giữa hai điểm................................................. 160 4.8.1.4 Vấn đề thay đổi tỉ lệ phĩng to thu nhỏ ..................................... 161 SV ne t.vn ix 4.8.2 Mơ tả chi tiết server ............................................................................. 162 4.8.2.1 Mơ tả chi tiết “Bản đồ ASPX” ................................................. 162 4.8.2.2 Mơ tả “Service tìm đường”....................................................... 163 4.8.2.3 Mơ tả Geoserver ....................................................................... 163 4.8.2.4 Mơ tả Microsoft SQL Server .................................................... 169 4.8.3 Mơ tả chi tiết quá trình tìm kiếm đường đi.......................................... 171 Chương 5 TỔNG KẾT ..................................................................................... 173 5.1 Kết luận ........................................................................................................ 173 5.2 Hướng phát triển: ......................................................................................... 173 Phụ lục A Mơ tả bổ sung cho các định dạng véc-tơ ....................................... 174 Phụ lục B Kết quả cài đặt ................................................................................ 190 Tài liệu tham khảo ............................................................................................... 194 SV ne t.vn x DANH MỤC CÁC HÌNH Hình 1.1 Ứng dụng bản đồ SVG của Sở Khoa học và Cơng nghệ TP. Hồ Chí Minh....................................................................................................... 12 Hình 2.1 Luồng cơng việc của VML và HTML ....................................................... 23 Hình 2.2 Minh họa VML .......................................................................................... 25 Hình 2.3 Các thành phần của PDF............................................................................ 27 Hình 2.4 Minh họa đơn giản về SVG ....................................................................... 33 Hình 2.5 Một ví dụ đơn giản về cây phân cấp DOM................................................ 37 Hình 2.6 Kiến trúc và hình thái XML....................................................................... 39 Hình 3.1 Minh họa nội dung SVG được nhúng nội tuyến........................................ 47 Hình 3.2 Minh họa thành phần gom nhĩm ‘g’.......................................................... 51 Hình 3.3 Minh họa thành phần ‘defs’ ....................................................................... 57 Hình 3.4 Cây DOM của nội dung SVG cho ví dụ hình chữ nhật tơ tuyến tính ........ 57 Hình 3.5 Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’ .......................................... 65 Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ .................................................... 65 Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’ .................................. 66 Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’............................................ 67 Hình 3.9 Minh họa thành phần ‘use’ với thuộc tính ‘transform’.............................. 68 Hình 3.10 Minh họa thành phần ‘use’ với trang định kiểu CSS............................... 69 Hình 3.11 Minh họa thành phần ‘rect’ vuơng gĩc .................................................... 76 Hình 3.12 Minh họa thành phần ‘rect’ trịn gĩc........................................................ 76 Hình 3.13 Minh họa thành phần ‘circle’ ................................................................... 77 Hình 3.14 Minh họa thành phần ‘ellipse’ ................................................................. 79 Hình 3.15 Minh họa thành phần ‘line’...................................................................... 80 Hình 3.16 Minh họa thành phần ‘polyline’............................................................... 81 Hình 3.17 Minh họa hệ trục tọa độ ban đầu.............................................................. 86 Hình 3.18 Minh họa hiển thị khơng cĩ phép biến đổi .............................................. 87 Hình 3.19 Minh họa phép tịnh tiến ........................................................................... 89 SV ne t.vn xi Hình 3.20 Minh họa phép quay và phép co giãn ...................................................... 90 Hình 3.21 Minh họa phép kéo xiên theo trục X, trục Y............................................ 91 Hình 3.22 Minh họa phép các phép biến đổi lồng nhau ........................................... 93 Hình 3.23 Minh họa thuộc tính ‘viewBox’ ............................................................... 96 Hình 3.24 Minh họa thuộc tính ‘preserveAspectRatio’ .......................................... 104 Hình 3.25 Minh họa thuộc tính ‘fill’....................................................................... 107 Hình 3.26 Minh họa nội dung SVG cĩ tham chiếu đến trang định kiểu CSS ........ 108 Hình 3.27 Minh họa thành phần ‘clipPath’............................................................. 118 Hình 3.28 Minh họa thành phần ‘path’ ................................................................... 120 Hình 3.29 Minh họa thành phần ‘text’ .................................................................... 124 Hình 3.30 Minh họa thành phần ‘tspan’ ................................................................. 127 Hình 3.31 Minh họa thành phần ‘tspan’ cĩ một vị trí đặc biệt ............................... 128 Hình 3.32 Minh họa thành phần ‘tspan’ thiết lập vị trí mới cho mỗi kí tự trong chuỗi ...................................................................................................... 129 Hình 3.33 Minh họa thành phần ‘tref’ .................................................................... 130 Hình 3.34 Minh họa thành phần ‘textPath’............................................................. 134 Hình 3.35 Minh họa thành phần ‘textPath’ cĩ sử dụng thuộc tính ‘tspan’............. 135 Hình 3.36 Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’ ......... 136 Hình 3.37 Minh họa thành phần ảnh động animateMotion .................................... 140 Hình 3.38 Minh họa chức năng bắt sự kiện chuột .................................................. 142 Hình 3.39 Minh họa bộ timer và thuộc tính mờ ‘opaque’ ...................................... 144 Hình 4.1 Mơ hình kiến trúc giao tiếp giữa client và WFS...................................... 150 Hình 4.2 Sơ đồ phân tầng của GeoServer ............................................................... 153 Hình 4.3 Sơ đồ kiến trúc ứng dụng ......................................................................... 154 Hình 4.4 Kiến trúc client-server được cài đặt ......................................................... 155 Hình 4.5 Kiến trúc chi tiết client-server được cài đặt ............................................. 156 Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client.................................... 157 Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện................................................... 158 Hình 4.8 Mơ tả chức năng server “Bản đồ ASPX”................................................. 160 SV ne t.vn xii Hình 4.9 Mơ tả server “Service tìm đường” ........................................................... 161 Hình 4.10 Mơ tả Geoserver..................................................................................... 161 Hình 4.11 Kết xuất của Geoserver .......................................................................... 162 Hình A.1 Ví dụ về ảnh VRML................................................................................ 178 Hình B.1 Bản đồ SVG được phát sinh bởi GenerateSVGMap............................... 189 Hình B.2 Bản đồ SVG được hiển thị trong chương trình client ............................. 190 Hình B.3 Minh hoạ chú thích khi rê chuột lên một đối tượng................................ 191 SV ne t.vn xiii DANH MỤC CÁC BẢNG BIỂU Bảng 4.1 Bảng MapNetworkWithLength ............................................................... 167 Bảng 4.2 Bảng MapNetworkArc_AutoWithDirection ........................................... 168 Bảng 4.3 Bảng MapNetworkDanhSachNodeKe..................................................... 168 Bảng A.1 Cấu trúc tập tin Flash.............................................................................. 175 Bảng A.2 Danh sách 18 thẻ của HGML ................................................................. 180 SV ne t.vn Chương 1. Mở đầu 14 Chương 1 Mở đầu 1.1 Vai trị của đồ họa véc-tơ trong ứng dụng bản đồ SVG (Scalable Vector Graphics) (Đồ họa véc-tơ khả co) là một chuẩn ra đời vào năm 1999. SVG là một định dạng đồ họa véc-tơ hỗ trợ các nhà phát triển mơ tả các hình ảnh bằng văn bản. Những năm gần đây, các ứng dụng về SVG ngày càng được phát triển mạnh trên khắp thế giới, trên các hệ thống máy tính để bàn và gần đây là trên các thiết bị nhúng chẳng hạn như thiết bị di động. Tại Việt Nam, việc nghiên cứu SVG cũng đã đạt được một số kết quả đáng khích lệ. Cĩ thể kể đến kết quả nghiên cứu của Sở Khoa học và Cơng nghệ TP. Hồ Chí Minh ( SVG ngày càng phát triển lớn mạnh. Bên cạnh đĩ là GIS cũng đang chiếm vai trị quan trọng trong lĩnh vực bản đồ. Việc kết hợp SVG và GIS sẽ tạo ra một hệ mới được gọi là SVG GIS. Hệ này cĩ chức năng tìm kiếm, tra cứu thơng tin bản đồ đồng thời lại tận dụng được tính ưu việt của SVG. SVG GIS cho phép phĩng to bản đồ đến kích cỡ bất kỳ mà khơng vỡ ảnh. SVG cĩ thể được xén theo kích thước tùy ý để truyền tải trên mạng được nhanh chĩng. Bản thân SVG đã hàm chứa dữ liệu. Hình 1.1. Ứng dụng bản đồ SVG của Sở Khoa học và Cơng nghệ TP. Hồ Chí Minh SV ne t.vn Chương 1. Mở đầu 15 Một điều cần lưu ý khi phát triển ứng dụng với SVG là tốc độ hiển thị nội dung SVG phụ thuộc vào độ phức tạp của nội dung SVG và tốc độ xử lý của máy tính. Do đĩ đối với ứng dụng bản đồ SVG, người phát triển cần phải chọn giải pháp tối ưu nhất là giảm tối đa kích thước tập tin .svg cần hiển thị tại một thời điểm bằng cách xén nội dung SVG bên trong nĩ. 1.2 Mục tiêu của đề tài Hiện nay, trên thế giới, các ứng dụng bản đồ đang chuyển dần sang sử dụng chuẩn SVG. Các ứng dụng này vơ cùng đa dạng, từ quản lý mùa màng, dịch bệnh, dân số, thời tiết, tội phạm cho đến quản lý đường trong đơ thị. Tại Việt Nam, việc xây dựng một ứng dụng bản đồ SVG cũng rất cần thiết vì sớm hay muộn thì chúng ta cũng phải thực hiện điều này để tận dụng lợi thế của SVG. Chính vì xuất phát từ nhu cầu trên, cùng với sự hấp dẫn của cơng nghệ nên chúng em đã chọn và xây dựng đề tài “TÌM HIỂU SVG VÀ XÂY DỰNG ỨNG DỤNG TÌM ĐƯỜNG ĐI TRÊN BẢN ĐỒ DỰA TRÊN ĐỒ HỌA VECTƠ”, với dữ liệu là bản đồ đường đi trong Thành phố Hồ Chí Minh. Các chức năng chính của ứng dụng cần phải xây dựng : - Chương trình địi hỏi về giao diện : cho phép người dùng duyệt từng phần trên bản đồ theo các chiều : sang trái, sang phải, lên trên và xuống dưới và cho phép phĩng to, thu nhỏ phần bản đồ đang xem. Đồng thời phải cĩ các luật giao thơng như đường một chiều kí hiệu trên bản đồ để tránh cho người dùng vi phạm. Cho phép thay đổi các thơng số như tỉ lệ phĩng to thu nhỏ mỗi lần, tỉ lệ di chuyển. - Cho phép người dùng tra cứu các tên đường. - Cho phép người dùng tìm đường đi ngắn nhất giữa 2 đường bằng chỉ dẫn lời hoặc bằng hình ảnh trực quan. SV ne t.vn Chương 2. Các vấn đề tổng quan 16 Chương 2 Các vấn đề tổng quan 2.1 Tổng quan về chuẩn véc-tơ cho bản đồ 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ Trong lĩnh vực bản đồ, bằng cách sử dụng véc-tơ, chúng ta cĩ thể làm cho việc tương tác, phân tích, sử dụng các chức năng liên quan đến màn hình trở nên dễ dàng hơn, chẳng hạn như phĩng to thu nhỏ (zoom) và kéo (pan). Chất lượng của các hình ảnh được tái hiện cũng tăng lên rất đáng chú ý. Cách đây khơng lâu, chỉ cĩ việc hiển thị văn bản và ảnh quét (raster image) được tiêu chuẩn hĩa. Trong khi đĩ, bản thân bản đồ lại cần một lượng các hàm bổ sung. Điều này cĩ thể đạt được bằng cách sử dụng server scripts hoặc các chỉ thị javascript phức tạp, và bằng cách nạp các ảnh quét. Thời điểm cuối năm 1999 đã chứng kiến sự ra đời của một chuẩn mới đầy hứa hẹn được gọi là SVG (Scalable Vector Graphics). Chuẩn này tạo ra khả năng trang bị đồ họa véc-tơ cho các web site. SVG được phát triển theo yêu cầu của giới cơng nghiệp, nên một lượng lớn các ứng dụng sẽ được phát triển tiếp. Khi xét về mặt lợi ích cho bản đồ, lần đầu tiên trong lịch sử của web, đã cĩ một chuẩn tuân thủ tối đa các yêu về đồ họa. Chuẩn véc-tơ được chia ra làm hai phần: • Chuẩn chính thức • Chuẩn bất thành văn 2.1.1.1 Chuẩn chính thức Các chuẩn chính thức là sự thỏa thuận bằng tài liệu chứa các đặc tả kỹ thuật hoặc các tiêu chuẩn được sử dụng dưới vai trị là các luật, các hướng dẫn hoặc các định nghĩa về các chức năng chính. Các chuẩn được tạo ra để đảm bảo rằng các tài liệu, sản phẩm, qui trình và dịch vụ luơn đúng với mục tiêu ban đầu của nĩ. Chúng được chứng nhận bởi các tổ chức về tiêu chuẩn, chẳng hạn như ISO (International SV ne t.vn Chương 2. Các vấn đề tổng quan 17 Organization for Standardization = Tổ chức Quốc tế về Tiêu chuẩn hĩa) hoặc IEEE (Institute of Electrical and Electronical Engineers = Viện kỹ sư điện và điện tử Hoa Kỳ) và được bắt buộc phải sử dụng thơng qua các văn bản qui định. ECMA (European Computer Manufacturer's Assocation = Hiệp hội các nhà sản xuất máy tính châu Âu) hoặc W3C (World Wide Web Consortium = Tổ chức World Wide Web) cũng cơng bố các chuẩn cĩ khả năng trở thành chuẩn chung nhưng khơng bắt buộc các nhà sản xuất phải áp dụng chúng. Trong thế giới WWW, cĩ một sự thuận lợi trong việc cân bằng các ngơn ngữ soạn thảo văn bản. Người dùng cĩ thể viết một đoạn văn bản khơng chỉ bằng ngơn ngữ HTML mà cịn cĩ thể sử dụng các thành phần trong các ngơn ngữ hiện cĩ khác (chẳng hạn như “formatting”, “animating”, “interactivity”). Các thành phần trong các ngơn ngữ khác nhau được đặt chung với nhau nên cần phải “giao tiếp với nhau”. Việc giao tiếp này chỉ cĩ được thực hiện thơng qua một cú pháp chính xác được cung cấp bởi các chuẩn. 2.1.1.2 Chuẩn bất thành văn Đây là một tiêu chuẩn hiện đang được chấp nhận và sử dụng rộng rãi mặc dù khơng cĩ tổ chức tiêu chuẩn nào thơng báo chấp nhận nĩ. Vì các lý do kỹ thuật, các cơng ty phần mềm thường khơng chấp nhận tất cả các chuẩn bất thành văn của cơng ty khác. Mặt khác, vì các lý do thương mại, họ muốn thiết lập các chuẩn riêng của mình, cố gắng tạo ra một chuẩn bất thành văn mới. Flash là một chuẩn như vậy. Hậu quả của việc trên là chúng tạo ra một lượng khỗng lồ các chuẩn bất thành văn. Điều này cĩ nghĩa là các phần của các chuẩn khơng thể được áp dụng trong thực tế (chẳng hạn như HTML 4.0). Tiếp theo của việc này là rất nhiều các chuẩn riêng của các cơng ty tạo nên vấn đề khơng tương thích khi kết hợp các sản phẩm, hoặc khi sử dụng các biến mơi trường. Khơng phải chỉ cĩ các cơng ty lớn mới cĩ khả năng tạo ra các chuẩn mới. Thậm chí một nhĩm nghiên cứu cũng cĩ khả năng nghĩ ra và cơng bố một ý tưởng nào đĩ, miễn là nĩ cĩ được cộng đồng người dùng chấp nhận hay khơng. Một ví dụ SV ne t.vn Chương 2. Các vấn đề tổng quan 18 cho việc này là Tổ chức CERN (European Organization for Nuclear Research = Tổ chức Nghiên cứu về Hạt nhân của châu Âu) đã tạo ra trình duyệt đồ họa đầu tiên đang được sử dụng rộng rãi. Một ví dụ khác là Viện Fraunhofer (tại Đức) đã tạo ra chuẩn nén âm thanh MP3 rất thơng dụng hiện nay. Cũng giống như các chuẩn bất thành văn, nếu thực sự hữu ích, chúng sẽ được chấp nhận trong lĩnh vực thương mại. Sau đĩ sẽ được tinh chỉnh và thương mại hĩa. 2.1.2 Các định dạng của véc-tơ Các định dạng thơng dụng hiện nay trên Internet: • SVF • DWF • Flash • PGML • WebCGM • VML • PDF • SVG • VRML • HGML • DrawML Sau đây là mơ tả tổng quan từng định dạng trên: 2.1.2.1 SVF SVF (Simple Vector Format = Định dạng véc-tơ đơn giản) là một định dạng đồ họa véc-tơ hỗ trợ thơng tin về lớp và các siêu liên kết. Nĩ được SoftSource và NCSA phát triển nhằm cung cấp một định dạng véc-tơ hai chiều hữu ích trong thế giới World Wide Web. Ban đầu SVF được dự định sử dụng cho lĩnh vực trình bày web của các ảnh vẽ CAD. SVF cĩ một plugin, được giới thiệu vào năm 1996 để tham gia vào việc biểu diễn các véc-tơ trong thể giới World Wide Web. Sau năm 1997, nĩ khơng cịn được phát triển nữa. Các ấn bản tài liệu chỉ hỗ trợ cho các phiên bản thương mại. Hiện SV ne t.vn Chương 2. Các vấn đề tổng quan 19 nay, khơng cĩ bộ chuyển đổi giữa SVF với hai định dạng HPGL và DXF. Các chức năng của nĩ: phĩng to thu nhỏ khơng rung (mịn), cửa sổ phĩng to thu nhỏ, kéo, ẩn/hiện các lớp. Việc tương tác bị giới hạn nhiều hơn: các đường thẳng và bề mặt chỉ cĩ thể được gắn với các siêu liên kết với sự trợ giúp của các chương trình bên ngồi. Trong việc hiển thị, SVF khơng hỗ trợ phép khử răng cưa và khơng cĩ hoạt ảnh. SVF được thiết kế thành một định dạng đơn giản để mơ tả ảnh véc-tơ. Các đối tượng vẽ cơ bản gồm cĩ điểm, đường thẳng, đường trịn, cung, đường cong Bezier và văn bản. Các chức năng của định dạng này bao gồm: • các lớp (điều khiển sự xuất hiện của các đối tượng) • các siêu liên kết (cho phép người dùng nhấn vào một vùng của ảnh vẽ để thực thi một tác vụ) • các thơng báo (gửi các thơng điệp khi người dùng vượt qua một mức phĩng to hay thu nhỏ nhất định nào đĩ) • các phép tơ màu • khả năng cho phép khai báo lại các màu mặc định Tập tin SVF được chia thành 3 phần: phần giới thiệu (intro), phần đầu (header) và phần thân (main). Phần giới thiệu chỉ đơn giản là một chuỗi văn bản xác định tập tin hiện tại là một tập tin dạng SVF. Phần đầu (header) chứa thơng tin tổng quát dùng trong việc hiển thị và chỉnh sửa ảnh chẳng hạn như các lớp, các phạm vi và màu sắc. Phần thân mơ tả các ảnh và siêu liên kết sẽ được vẽ như thế nào. (xin vui lịng xem phụ lục A mục 1 để biết thêm về ba phần trên) Kiểu MIME (Multipurpose Internet Mail Extensions) Kiểu MIME cho các tập tin SVF là “vector/vnd.svf”. Phần mở rộng của tập tin theo quy ước là .SVF hoặc .svf. Cú pháp cho SVF phiên bản 1.1 SV ne t.vn Chương 2. Các vấn đề tổng quan 20 (Xin vui lịng xem phụ lục A mục 1 để biết thêm về phần này) (Nguồn: 2.1.2.2 DWF DWF (Drawing Web Format) là một định dạng tập tin mở của hãng Autodesk, được sử dụng kèm với plugin WHIP4 của AutoDesk. Đây là một trong một vài plugin sử dụng Javascript. Tập tin theo định dạng DWF được tạo từ các tập tin định dạng DWG. Các chức năng của định dạng DWF gồm cĩ: kéo (pan), phĩng to và thu nhỏ khơng bị giật hình (smooth zoom), cửa sổ phĩng to thu nhỏ (zoom window), phĩng to thu nhỏ trên một khung nhìn được định nghĩa trước, xếp lớp bên trong và bên ngồi, và hiển thị các siêu liên kết. Người dùng cĩ thể chèn ảnh và văn bản vào trong tập tin định dạng DWF. Khơng cĩ hoạt ảnh trong định dạng tập tin này. Ngồi ra cịn cĩ một phiên bản chạy trên Java applet. DWF được nhúng vào trong các sản phẩm của hãng Microsoft bằng cách sử dụng các ActiveX Control. Hai ActiveX Control cĩ thể kể đến là bộ hiển thị DWF tối ưu và bộ soạn thảo DWF dùng để xem và nhúng các tập tin DWF với đầy đủ chức năng vào trong các ứng dụng của Microsoft. Hai ActiveX Control này sẽ tăng cường khả năng chia sẻ và hiển thị các thiết kế bằng cách nhúng các tập tin DWF vào trong các tài liệu Internet Explorer, PowerPoint, Word, hoặc Excel kèm theo đầy đủ chức năng kéo, phĩng to thu nhỏ và các chức năng khác. Các tập tin DWF máy chủ (host DWF files) trên các web site cĩ nhiệm vụ chia sẻ các sơ đồ, bản đồ và các danh mục thành phần (component category) (trong các bản vẽ của các kiến trúc sư). Hãng Autodesk cung cấp bộ hiển thị DWF (DWF Viewer) và các hàm giao diện lập trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs). Các tài liệu hướng dẫn đi kèm với hai cơng cụ này sẽ giúp người dùng tùy biến bộ hiển thị DWF, bộ soạn thảo DWF bên trong các web site và các ứng dụng của hãng thứ ba. Các tài liệu này cung cấp chỉ dẫn cho các chức năng như định vị đến một SV ne t.vn Chương 2. Các vấn đề tổng quan 21 trang chỉ định, hoặc xem và điều khiển sự xuất hiện của các lớp, hoặc điều khiển khả năng ẩn, hiện thanh cơng cụ và các menu ngữ cảnh, cũng như tùy biến các ứng xử của bộ hiển thị. Người dùng cĩ thể tải bộ hiển thị DWF (DWF Viewer) và các giao diện lập trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs) từ trang địa chỉ (Nguồn: 2.1.2.3 Flash (cịn gọi là SWF) Định dạng tập tin Macromedia Flash (SWF) (đọc là “swiff”) được dùng để truyền tải đồ họa véc-tơ và hoạt ảnh qua mạng Internet. Định dạng tập tin SWF được thiết kế để trở thành một định dạng truyền tải hiệu quả, chứ khơng nhắm vào mục đích trao đổi hình ảnh giữa các bộ soạn thảo đồ họa. Hiện nay, Flash là định dạng véc-tơ tương tác được sử dụng rộng rãi nhất. Nĩ đĩng vai trị là một plugin Macromedia bên trong trình duyệt. Theo quan điểm của lĩnh vực bản đồ, đây là chuẩn cập nhật nhất cho việc hiển thị véc-tơ. Flash vẫn chưa trở thành chuẩn chính thức cho véc-tơ, và trong một thời gian dài tài liệu lập trình vẫn rất nghèo nàn. Nĩ là một định dạng nhị phân và độc quyền nên người sử dụng địi hỏi phải cĩ mã nguồn mở. Mặc dù vậy, do định dạng này được tạo ra để đáp ứng nhu cầu của cộng đồng và giới cơng nghiệp nên nĩ đã tăng trưởng rất nhanh. Trong đầu năm 2000, gần 70% trình duyệt đã hỗ trợ định dạng này mà khơng cần phải cài đặt phụ trợ (khơng cần dùng plugin). Flash khơng chỉ cĩ khả năng hiển thị đồ họa véc-tơ. Các đoạn phim và nhạc cĩ thể được tích hợp hoặc phát sinh một cách dễ dàng. Đồ họa của Flash cĩ thể được xuất ra Macromedia Freehand, Adobe Illustrator hoặc CorelDRAW, đồng thời cũng cĩ thể được chỉnh sửa bằng trình soạn thảo Macromedia Flash. Cĩ rất nhiều hàm để tạo hoạt ảnh, tích hợp các hiệu ứng đồ họa đặc biệt. Nhiều ứng dụng đẹp mắt đã chứng tỏ Flash là một cơng cụ web linh hoạt, chẳng hạn như cho phép tải dữ liệu lên mạng liên tục (một trang cĩ thể được hiển thị thậm chí trước khi tồn bộ tập tin SV ne t.vn Chương 2. Các vấn đề tổng quan 22 được tải về). Hiện nay Flash gặp rất nhiều vấn đề đối với bản đồ khi tích hợp dữ liệu bên ngồi và khi chỉnh sửa hoặc tạo các chức năng cần thiết riêng của người dùng. Các giao tiếp đang được phát triển thêm, nhưng chúng khơng bao giờ trở thành chuẩn quốc tế bởi vì Flash đang là sở hữu độc quyền của hãng Macromedia. Xin vui lịng xem phụ lục A mục 2 để biết thêm chi tiết về các phần sau đây: • Các mục tiêu thiết kế dành cho SWF • Cấu trúc của tập tin Flash • Tối ưu hĩa kích thước tập tin SWF • Nội dung bên trong một tập tin SWF 2.1.2.4 PGML Precision Graphics Markup Language (PGML) PGML (Precision Graphics Markup Language) là ngơn ngữ đánh dấu đồ họa chính xác. Đây là một tập các đặc tả định dạng véc-tơ độc quyền hai chiều dựa trên văn bản. Nĩ được thiết kế để đáp ứng cả hai nhu cầu đồ họa véc-tơ của người dùng thơng thường và nhu cầu về độ chính xác của các họa sĩ. Đặc tả này được hãng Adobe đưa ra từ nền tảng của của PostScript and PDF. Nĩ được phát sinh thơng qua sự chuyển đổi khơng liên quan đến PDF. Nĩ thỏa mãn các yêu cầu nghiêm ngặt và cung cấp các chức năng tương tác ở cấp cao. PGML cũng chứa những tính năng phụ trợ để thỏa mãn nhu cầu của các ứng dụng Web. Nhu cầu về độ chính xác của các họa sĩ được hiểu là các thiết kế đồ họa xuất hiện trên hệ thống của người dùng cuối phải cĩ đúng với phơng chữ, màu sắc, trình bày và các mối kết hợp mà họ muốn. Ảnh dạng PGML chứa một tập hợp gồm một hoặc nhiều đối tượng đồ họa (các đối tượng đường, đối tượng hình học, đối tượng hình ảnh và đối tượng văn bản). Sự xuất hiện trực quan của một đối tượng khi nĩ được vẽ sẽ được xác định từng phần bằng một dãy các tham số. Ví dụ, một đối tượng đường sẽ được tơ bằng một màu xác định, cịn một đối tượng văn bản sẽ được vẽ bằng cách sử dụng một SV ne t.vn Chương 2. Các vấn đề tổng quan 23 phơng xác định. Tập hợp các tham số như vậy được gọi là trạng thái đồ họa. PGML cung cấp các phương thức để chỉ định các đối tượng, và để xác định các tham số trong trạng thái đồ họa khi các đối tượng này được vẽ. Cấu trúc của một tập tin PGML khơng cĩ nội dung: 2.1.2.5 WebCGM CGM (Computer Graphics Metafile = Siêu tập tin Đồ họa máy tính) đã trở thành một chuẩn ISO (ISO/IEC 8632:1999) cho các định nghĩa véc-tơ và định nghĩa ảnh véc-tơ/ảnh quét từ năm 1987. CGM được thiết kế để đáp ứng nhu cầu của đồ họa véc-tơ hai chiều. CGM gây được sự chú ý mạnh trong việc minh họa tài liệu kỹ thuật và tài liệu điện tử tương tác, trực quan hĩa dữ liệu địa lý, và trong những lĩnh vực ứng dụng khác. Nĩ cịn được sử dụng rộng rãi trong lĩnh vực sản xuất ơ-tơ, máy bay và cơng nghiệp quốc phịng. Bản mơ tả CGM là một tập con của chuẩn ISO, và cũng là một tập các đặc tả hướng đến việc ứng dụng một cách hiệu quả tiêu chuẩn ISO vào việc biểu diễn nội dung đồ họa hai chiều bên trong tài liệu Web. WebCGM là một bản mơ tả cho cách ứng dụng hiệu quả CGM vào trong các tài liệu điện tử Web. WebCGM là một nỗ lực hợp tác giữa nghiệp đồn CGM với đội ngũ W3C, đồng thời cũng được hỗ trợ từ dự án European Commission Esprit. Nĩ đĩng vai trị như một sự thống nhất quan trọng giữa phần lớn người sử dụng và người bổ sung đặc tả cho CGM. Do đĩ nĩ hợp nhất các xu hướng đang rời rạc tại thời điểm đĩ bằng cách tận dụng CGM trong các ứng dụng tài liệu Web. Các yêu cầu thích ứng rõ ràng và khơng nhập nhằng của WebCGM sẽ mở rộng khả năng tương tác của các cài đặt. Do đĩ, điều này cĩ thể SV ne t.vn Chương 2. Các vấn đề tổng quan 24 tạo ra những cơng cụ kiểm định CGM sẵn cĩ, các bộ kiểm tra, và các dịch vụ kiểm tra chứng thực sản phẩm cho các ứng dụng WebCGM. WebCGM đã được đăng ký là một kiểu đa phương tiện (“image/cgm”) trên Internet và World Wide Web từ tháng 12 năm 1995. Kiểu MIME (Multipurpose Internet Mail Extensions) đúng cho WebCGM là: Mặc dù WebCGM là một định dạng tập tin nhị phân và khơng thể định kiểu, nĩ vẫn tuân theo các yêu cầu mà W3C đã cơng bố cho một định dạng đồ họa khả co ở nhưng nơi mà nĩ cĩ thể được áp dụng. Tiêu chuẩn thiết kế nội dung đồ họa của WebCGM là nhắm đến sự cân bằng giữa năng lực hiển thị đồ họa và tính đơn giản, khả năng bổ sung được các định dạng mới vào WebCGM. Một tập nhỏ nhưng mạnh gồm các thành phần siêu dữ liệu đã được chuẩn hĩa trong WebCGM. Do đĩ WebCGM hỗ trợ các chức năng như: siêu liên kết và định vị tài liệu, cấu trúc hĩa và phân lớp hình ảnh, tìm kiếm và truy vấn trên nội dung hình ảnh WebCGM. Các bộ hiển thị và soạn thảo cho CGM đều cĩ thể chạy được trên nhiều hệ nền khác nhau và đang được chỉnh sửa lại cho phù hợp với đặc tả WebCGM. 2.1.2.6 VML VML (Vector Markup Language) là ngơn ngữ đánh dấu đồ họa. Nĩ là một định dạng véc-tơ hai chiều dựa văn bản, đồng thời cũng là định dạng độc quyền của hãng Microsoft. Nĩ đã được tích hợp vào Internet Explorer, nhưng từ tháng 9/1998 nĩ khơng cịn được Microsoft tập trung phát triển nữa. PGML là khởi đầu của một cú pháp hấp dẫn, nhưng thiếu khả năng mở rộng. Trước khi SVG ra đời, PGML là một xu hướng đầy hứa hẹn, nhưng bị giới hạn sử dụng trong một hệ nền duy nhất là Windows. VML là một phần áp dụng của XML 1.0 (XML = Extensible Markup Language = ngơn ngữ đánh dấu cĩ thể mở rộng). Nĩ định nghĩa một định dạng cho image/cgm;Version=4;ProfileId=WebCGM SV ne t.vn Chương 2. Các vấn đề tổng quan 25 việc mã hĩa thơng tin véc-tơ với các đánh dấu phụ trợ, nhằm diễn tả thơng tin sẽ được hiển thị và chỉnh sửa như thế nào. Ngơn ngữ đánh dấu véc-tơ (VML = Vector Markup Language) cung cấp các đánh dấu thơng tin đồ họa véc-tơ giống như HTML cung cấp các đánh dấu thơng tin dạng văn bản. Nội dung VML mơ tả sự kết hợp của các đường được tạo từ các đường thẳng và đường cong cơ bản. Các đánh dấu cho biết ý nghĩa và thơng tin biểu diễn của các đường. VML được viết bằng cách sử dụng cú pháp của XML. Điều này giống như HTML được viết bằng cách sử dụng cú pháp của SGML (Standard Generalized Markup Language, [ISO 8879] = Ngơn ngữ đánh dấu được tổng quát hĩa theo tiêu chuẩn) - nghĩa là XML là một dạng được giới hạn lại từ SGML. VML sử dụng “Các trang định kiểu nạp chồng cấp 2” (Cascading Style Sheets, Level 2 = CSS2) theo cùng cách mà HTML xác định dạng trình bày của đồ họa véc- tơ được nĩ chứa. Luồng cơng việc liên quan đến việc xây dựng VML cĩ thể được so sánh với luồng cơng việc xây dựng HTML được thể hiện trong hình sau: Hình 2.1. Luồng cơng việc của VML và HTML SV ne t.vn Chương 2. Các vấn đề tổng quan 26 Điểm khác nhau chính giữa luồng cơng việc HTML và VML là ở một bước phần gần cuối trình bày kí tự so với biến đổi đường. Trong nhánh của HTML, luồng cơng việc phát sinh các vị trí và các thơng tin khác cho một chuỗi các mục chính (characters) mà sau đĩ chúng (tức các mục chính) sẽ được xây dựng bằng cách sử dụng chức năng cĩ sẵn của hệ điều hành. Trong nhánh của VML, luồng cơng việc phát sinh các vị trí và các thơng tin liên quan cho các đường véc-tơ và các đối tượng liên quan (chẳng hạn như ảnh bitmap) mà sau đĩ chúng (tức các đối tượng liên quan này) sẽ được xây dựng bằng cách sử dụng chức năng cĩ sẵn của hệ điều hành. Như vậy, sự khác nhau nằm ở chỗ HTML thì tạo ra các mục chính (characters), trong khi VML tạo ra các đường véc- tơ và các đối tượng liên quan. Luồng cơng việc chung trong hình trên là một phần khơng thể thiếu của VML. Hai yêu cầu của quá trình thiết kế là tích hợp VML với HTML sẵn cĩ, đồng thời bỏ qua việc yêu cầu một tác nhân người dùng (user agent) phải thực hiện lại cơng việc đã được hồn thành. Yêu cầu thứ hai trên được thực hiện bằng cách sử dụng các biểu diễn khác, hoặc các cài đặt khác của các chức năng HTML hay CSS sẵn cĩ. Giống như HTML, VML mơ tả các đối tượng mà chúng sẽ thường được chỉnh sửa trong tương lai. Trong trườg hợp của HTML, các đối tượng là các đoạn, các dạng hoặc các bảng. Cịn đối với VML, các đối tượng là các hình hoặc các tập hợp các hình đã được gom nhĩm. VML khơng yêu cầu một hướng tiếp cận đặc thù nào để chỉnh sửa – nĩ cung cấp một số lượng đa dạng các trình soạn thảo. Lượng dữ liệu đồ họa khỗng lồ buộc VML phải chú ý đến một trình soạn thảo đã ghi lại nhưng thơng tin ngữ nghĩa cĩ liên quan đến mơ tả VML. VML luơn đảm bảo rằng các trình soạn thảo cĩ thể nhận diện và quản lý chính xác dữ liệu của mỗi đối tượng mà nĩ quản lý (thậm chí cho dù chúng khơng phải lúc nào cũng hiểu hết tồn bộ dữ liệu này) SV ne t.vn Chương 2. Các vấn đề tổng quan 27 Một đoạn mã VML: Hình ảnh xuất hiện trên trình duyệt: Hình 2.2 Minh họa VML 2.1.2.7 PDF PDF (Portable Document Format = Định dạng tài liệu dễ mang chuyển) là một định dạng tập tin được sử dụng để biểu diễn một tài liệu theo một cách độc lập với phần mềm ứng dụng, phần cứng và hệ điều hành được sử dụng để tạo ra nĩ. Hiện nay, PDF đã trở thành định dạng được hỗ trợ sẵn trong of Adobe Illustrator 9. Mục đích thiết kế khơng nhắm vào WWW, nhưng nĩ đã được sử dụng với sự trợ giúp của plugin. Bộ hiển thị của nĩ, một sản phẩm miễn phí của Adobe, hoạt động độc lập với trình duyệt. Các tài liệu cĩ thể được bảo vệ bởi mật khẩu khỏi việc đọc, in ấn và sao chép. Định dạng nhị phân khơng cho phép các máy tìm kiếm WWW rà sốt thơng tin. Với định dạng văn bản thì điều này cĩ thể thực hiện được. Tuy nhiên nĩ khơng phải là giải pháp hay vì kích thước lớn của dữ liệu. <v:shape style='top: 0; left: 0; width: 250; height: 250' stroke="true" strokecolor="red" strokeweight="2" fill="true" fillcolor="green" coordorigin="0 0" coordsize="175 175"> <v:path v="m 8,65 l 72,65,92,11,112,65,174,65,122,100,142,155,92,12 1,42,155,60,100 Đoạn mơ tả đường bao ngồi của ngơi SV ne t.vn Chương 2. Các vấn đề tổng quan 28 PDF chính là một “mơ hình ý niệm ngơn ngữ PostScript” (xin vui lịng xem phụ lục để biết thêm chi tiết) Cấu trúc của một tập tin PDF Một tập tin PDF chứa một tài liệu PDF và các thơng tin hỗ trợ khác. Một tài liệu PDF chứa một hoặc nhiều trang. Mỗi trang trong tài liệu cĩ thể chứa bất kỳ dạng kết hợp nào của văn bản, đồ họa và hình trong một định dạng độc lập thiết bị và độ phân giải. Đây chính là mơ tả trang. Một tài liệu PDF cũng cĩ thể chứa các thơng tin mà chỉ cĩ thể cĩ trong một trang điện tử, chẳng hạn như các siêu liên kết. Ngồi ra, một tập tin PDF cĩ thể chứa phiên bản của đặc tả PDF được sử dụng trong tập tin và thơng tin về vị trí của các cấu trúc quan trong trong tập tin. PDF chính là một mơ hình ý niệm ngơn ngữ PostScript (xin vui lịng xem phụ lục để biết thêm chi tiết). Ưu điểm của PDF • Là mẫu mực biểu diễn hình ảnh của Adobe • Dễ mang chuyển • Nén/ Mã hĩa • Độc lập phơng chữ • Truy cập ngẫu nhiên • Cập nhật tăng dần • Khả năng mở rộng SV ne t.vn Chương 2. Các vấn đề tổng quan 29 Các thành phần của PDF Hình 2.3. Các thành phần của PDF Thành phần đầu tiên (Objects) là tập hợp các kiểu đối tượng cơ bản được PDF sử dụng để minh họa các đối tượng. Các kiểu này, trừ một ít ngoại lệ, phụ thuộc vào các kiểu dữ liệu được sử dụng trong ngơn ngữ PostScript. Thành phần thứ hai (File structure) là cấu trúc tập tin PDF. Cấu trúc tập tin chỉ định các đối tượng sẽ được lưu trữ trong một tập tin PDF, cách truy cập và cập nhật chúng như thế nào. Cấu trúc này độc lập với ngữ nghĩa của các đối tượng. Thành phần thứ ba (Document structure) là cấu trúc PDF. Cấu trúc này tài liệu chỉ định các kiểu đối tượng cơ bản được sử dụng để biểu diễn các thành phần của một tài liệu PDF: các trang, các chú thích, các siêu liên kết, các phơng chữ. Thành phần thứ tư (và cũng là thành phần cuối cùng) (Page Description) là mơ tả trang PDF. Một mơ tả trang PDF, khi là thành phần của một đối tượng khác, cĩ thể được diễn giải độc lập với các thành phần khác. Một mơ tả trang chỉ cĩ tương tác bị giới hạn với các phần khác của một tài liệu PDF. Điều này sẽ đơn giản hĩa việc chuyển đổi nĩ sang định dạng PostScript. SV ne t.vn Chương 2. Các vấn đề tổng quan 30 2.1.2.8 SVG SVG (Scalable Vector Graphics) là một định dạng mới và mở hồn tồn được Tổ chức W3C (World Wide Web Consortium) khuyến khích sử dụng và phát triển. SVG cĩ tất cả các ưu điểm của Flash (một chuẩn khơng chính thức hiện nay) cộng thêm các tính năng sau: các phơng chữ nhúng, ngơn ngữ đánh dấu cĩ khả năng mở rộng (XML), các trang định kiểu (CSS), khả năng tương tác và hoạt ảnh. Với sự hỗ trợ của DOM (Document Object Model), SVG hồn tồn tương thích với HTML. SVG là một chuẩn độc lập nhà sản xuất và miễn phí, được phát triển theo quy trình của W3C. Nĩ được hỗ trợ mạnh từ các ngành cơng nghiệp khác nhau. Đặc tả SVG được tạo ra từ sự hợp tác của các hãng sản xuất tầm cỡ như include Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp và Sun Microsystems. Các bộ hiển thị SVG được phân phối đến hơn 100 triệu máy tính để bàn (desktop). Bên cạnh đĩ, nĩ được hỗ trợ từ rất nhiều các cơng cụ soạn thảo. SVG là một hệ nền cho đồ họa hai chiều. Nĩ gồm hai phần: một định dạng tập tin dựa trên XML và một giao diện lập trình API cho các ứng dụng đồ họa. Các chức năng chính gồm cĩ các vật thể hình học, văn bản và đồ họa ảnh quét được nhúng, với nhiều kiểu vẽ khác nhau. Nĩ hỗ trợ các ngơn ngữ như ECMAScript và cĩ các hỗ trợ thơng minh cho hoạt ảnh. SVG được sử dụng trong nhiều lĩnh vực kinh doanh, bao gồm đồ họa Web, hoạt ảnh, các giao diện người dùng, trao đổi đồ họa, in ấn, ứng dụng cho thiết bị di động và thiết kế chất lượng cao. SVG được xây dựng trên nhiều chuẩn thành cơng khác chẳng hạn như: • XML (đồ họa SVG là dạng dựa trên văn bản và do đĩ rất dễ tạo) • JPEG và PNG cho các định dạng ảnh • DOM cho phần viết kịch bản (script) và tương tác • SMIL cho hoạt ảnh • CSS cho việc định kiểu SV ne t.vn Chương 2. Các vấn đề tổng quan 31 SVG cĩ khả năng tương tác. W3C cĩ nhiệm vụ đưa ra một bộ kiểm tra và các kết quả cài đặt để đảm bảo tính tương thích. Các ứng dụng của SVG trong cơng nghiệp • Thiết bị di động Trong năm 2001, ngành cơng nghiệp điện thoại di động đã chọn SVG là cơ sở cho hệ nền đồ họa của mình.Nhiều cơng ty hàng đầu đã tham gia vào nỗ lực phát triển SVG để tạo ra tập tin đặc tả hiện trang cho bộ SVG Tiny và bộ SVG Basic. SVG Tiny và SVG Basic là hai tập con của tập đặc tả SVG. Hai bộ này được gọi chung là SVG Mobile, được tạo ra nhằm hướng đến các thiết bị cĩ tài nguyên hạn chế chẳng hạn như các thiết bị cầm tay di động và các PDA (Personal Digital Assistant) (Thiết bị hỗ trợ kỹ thuật số cho cá nhân). Đặc tả SVG Mobile được 3GPP chọn làm định dạng đồ họa bắt buộc cho các điện thoại di động thế hệ kế tiếp và cho việc gửi tin nhắn đa phương tiện. Hiện nay, các thiết bị cầm tay cho phép dùng SVG đã được bán rộng rãi trên thị trường. SVG Mobile được sử dụng chính cho việc gửi tin nhắn trong các ứng dụng như thiệp mừng, sơ đồ và các hoạt ảnh (ảnh chuyển động). • Ấn bản Sự kết hợp giữa các chức năng đồ họa, các hỗ trợ văn bản mang ngữ nghĩa và tính độc lập độ phân giải trong SVG đã tạo ra một định dạng thích hợp cho việc in ấn. Các cơng ty sản xuất phần cứng in ấn hàng đầu hiện nay đang ra sức phát triển đặc tả SVG Print. Đây là một phiên bản mới của SVG được mơ tả thích hợp cho cơng việc kết xuất tài liệu lên giấy tờ. SVG Print được sử dụng trong các trường họp sau: o Một ngơn ngữ mơ tả trang dựa trên XML tương tự như Postscript và PDF o Một định dạng lưu trữ ở mức hình thái cuối cùng o Kỹ thuật in dữ liệu biến đổi, trong đĩ thơng tin vào được cung cấp thơng qua một cơ sở dữ liệu, và thơng tin ra được hiển thị bằng cách dùng một mẫu SV ne t.vn Chương 2. Các vấn đề tổng quan 32 SVG đồ họa. SVG cung cấp hiển thị dạng cứng (hardcopy) (chẳng hạn như giấy tờ) và hiển thị trực tuyến đồng nhất. Vì SVG Print dựa trên nền tảng XML nên nĩ phù hợp một cách hồn hảo với các luồng cơng việc XML hiện cĩ. Điều này cĩ nghĩa là, nếu các chương trình cĩ ống dẫn xử lý dữ liệu hỗ trợ XML thì sẽ cĩ thể chèn các khả năng của SVG Print một cách dễ dàng vào luồng cơng việc ấn bản của chúng. Việc này cho phép phát sinh các tài liệu động. SVG Print cũng tích hợp các định dạng mơ tả cơng việc chúng chẳng hạn như PODi’s PPML và CIP4’s JDF. • Các ứng dụng Web Các ứng dụng dựa trên nền đang tăng trưởng rất nhanh và phỗ biến. Các nhà phát triển thường bị giới hạn bởi vấn đề khơng tương thích trình duyệt và thiếu các chức năng. Với sự hỗ trợ mạnh mẽ của ngơn ngữ viết kịch bản (script) và hỗ trợ bắt sự kiện, SVG cĩ thể được sử dụng dưới dạng một hệ nền mà các ứng dụng giàu hình ảnh và các giao tiếp người dùng sẽ được xây dựng trên đĩ. Với SVG, nhà phát triển ứng dụng sẽ quen với việc sử dụng một tập hợp các chuẩn mở. Chúng khơng bị ràng buộc vào một cài đặt chuyên biệt nào, một nhà sản xuất nào và một cơng cụ soạn thảo nào. SVG thích hợp cho thị trường thơng dụng chuyên thiết kế đồ họa trong lĩnh vực hàng khơng, vận tải, xe hơi và truyền thơng. Khả năng mở rộng của XML cho phép các sơ đồ SVG chứa được các siêu dữ liệu nhúng dưới nhiều định dạng khác nhau mà khơng ảnh hưởng đến việc minh họa. Ví dụ, một chương trình CAD cĩ thể xuất kết quả ra định dạng SVG để hiển thị trực tuyếm, nhưng đồng thời cũng nhúng dữ liệu vào bên trong tập tin đĩ để cho phép người dùng chỉnh sửa nhanh chĩng nội dung của tập tin đĩ. Cũng như các định dạng khác, hiện nay SVG là định dạng được rất nhiều cơng cụ hỗ trợ nhập và xuất dữ liệu. Do đĩ nĩ cĩ thể được sử dụng như là một định dạng trao đổi dữ liệu giữa các ứng dụng. SV ne t.vn Chương 2. Các vấn đề tổng quan 33 • GIS và bản đồ GIS (Geographic Information Systems) cĩ các yêu cầu rất rõ ràng: các tính năng đồ họa phức tạp, hỗ trợ nội dung ảnh quét và véc-tơ và khả năng quản lý một lượng dữ liệu lớn. SVG hồn tồn thích hợp cho thị trường này và nhiều hệ thống GIS đã hỗ trợ kết xuất ra SVG. Giống như các mục tiêu thiết kế vừa được đề cập ở trên, khả năng mở rộng SVG và dữ liệu nhúng đặc biệt hữu dụng đối với cộng đồng thực hiện bản đồ. Ví dụ, các thành phần đồ họa cĩ thể được xem như các đối tượng cĩ sẵn (chẳng hạn như một hồ nước) trong SVG. Điều này cho phép các ứng dụng giao tiếp với các đối tượng thơng qua ngơn ngữ hình học. SVG là một phần bổ sung hồn hảo cho định dạng GML của tổ chức OpenGIS. GML, cũng dựa trên XML, mơ tả các thành phần đồ họa chẳng hạn như các con sơng và các con đường. Dữ liệu theo định dạng GML cĩ thể được chuyển đổi sang dữ liệu theo định dạng SVG bằng cách sử dụng ống dẫn cho việc hiển thị trực tuyến. • Các hệ thống nhúng Phần lớn các hệ thống nhúng đều cĩ các giới hạn khắt khe về tài nguyên, chẳng hạn như màn hình hiển thị nhỏ hơn, bộ nhớ cĩ dung lượng hạn chế, và khả năng tính tốn bị cắt giảm so với các hệ thống máy tính để bàn thường thấy. Đặc tả SVG Mobile được thiết kế cho các thiết bị như hệ thống nhúng, đồng thời cho phép phát triển các giao diện người dùng đồ họa cho các hệ thống này. Trong các hỗ trợ cho các sự kiện và viết kịch bản, các thiết bị cĩ thể sử dụng SVG dạng nhỏ để điều khiển và quản lý. Một trong các thiết bị như vậy là một hệ thống điều khiển máy cơng nghiệp. Cấu trúc tài liệu SVG cơ bản: 1 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 3 " SV ne t.vn Chương 2. Các vấn đề tổng quan 34 20010904/DTD/svg10.dtd"> 4 <svg xmlns="" 5 Xmlns:xlink=""> 6 7 Dịng 1 : là một khai báo XML để chỉ định đây là một tài liệu XML thỏa quy ước của bản đặc tả XML1.0. Dịng 2,3: là một khai báo kiểu tài liệu XML để chỉ định văn phạm cho tập tin này. Văn phạm SVG được định nghĩa trong SVG 1.0 DTD. Dịng 4: là thành phần gốc của tài liệu XML. Chúng ta tạo một thành phần ‘svg’ vì khai báo kiểu tài liệu chỉ định thành phần gốc bắt buộc phải là một thẻ ‘svg’. Thành phần này cũng chỉ định khơng gian tên XML mặc định cho tài liệu này. Thành phần ‘svg’ cĩ nhiều thuộc tính ảnh hưởng cho cả tài liệu SVG. Dịng 5: dịng này chỉ định khơng gian tên liên kết ngồi được sử dụng để tham chiếu ngoại các hình ảnh và các thành phần trong một tài liệu SVG. Dịng 6: Nội dung của tài liệu SVG Dịng 7: Đĩng thành phần ‘svg’ để hồn chỉnh tài liệu SVG đúng hình thức. (Nguồn: SV ne t.vn Chương 2. Các vấn đề tổng quan 35 Một ví dụ về SVG: Ví dụ đơn giản sau vẽ chữ dọc theo một đường cong Kết quả hiển thị trên trình duyệt: Hình 2.4. Minh họa đơn giản về SVG <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="" xmlns:xlink=""> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> Example toap01 - simple text on a path <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > We go up, then we go down, then up again <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> SV ne t.vn Chương 2. Các vấn đề tổng quan 36 2.1.2.9 VRML VRML (Virtual Reality Modeling Language) là ngơn ngữ mơ hình hĩa thực tại ảo, một định dạng tập tin được sử dụng trong việc mơ tả các thế giới và các đối tượng đồ họa tương tác ba chiều. VRML được thiết kế để dùng trong mơi trường Internet, Intranet và các hệ thống máy khách cục bộ (local client). VRML cịn được dự trù trở thành một chuẩn trao đổi đa năng cho đồ họa ba chiều tích hợp và truyền thơng đa phương tiện. VRML cĩ thể được sử dụng trong rất nhiều lĩnh vực ứng dụng chẳng hạn như trực quan hĩa các khái niệm khoa học và kỹ thuật, trình diễn đa phương tiện, giải trí và giáo dục, hỗ trợ web và chia sẻ các thế giới ảo. VRML được thiết kế nhằm đáp ứng các yêu cầu sau: • Là một chuẩn chính thống: cho phép phát triển các chương trình máy tính cĩ khả năng tạo, chỉnh sửa và bảo trì các tập tin VRML. Bên cạnh đĩ, người dùng cĩ thể viết các chương trình dịch tự động cho phép chuyển đổi các định dạng tập tin ba chiều thơng dụng sang các tập tin định dạng VRML. • Cĩ khả năng kết hợp: Hỗ trợ khả năng sử dụng và kết hợp các đối tượng ba chiều động bên trong một tổng thể và do đĩ cho phép tái sử dụng. • Cĩ thể mở rộng: cung cấp khả năng chèn thêm các kiểu đối tượng mới chưa được định nghĩa sẵn trong VRML. • Cĩ nhiều khả năng cài đặt: VRML cĩ thể được cài đặt trên một lượng lớn các hệ thống máy tính. • Hiệu suất cao: nhấn mạnh hiệu suất khả co, tương tác trên một lượng lớn các hệ nền tính tốn. • Tính khả co: cho phép tạo ra các thế giới ba chiều động cĩ độ lớn tùy ý. Vai trị của VRML VRML cĩ khả năng biểu thị các đối tượng đa phương tiện, các đối tượng ba chiều cĩ hoạt ảnh, và các đối tượng ba chiều tĩnh bằng cách sử dụng các siêu liên kết đến các phương tiện khác như văn bản, âm thanh, phim và hình ảnh. Các trình SV ne t.vn Chương 2. Các vấn đề tổng quan 37 duyệt hỗ trợ VRML cũng như các cơng cụ chính thống để tạo ra các tập tin VRML cĩ thể chạy trên nhiều hệ nền khác nhau. VRML cung cấp một mơ hình cĩ khả năng mở rộng cho phép người dùng định nghĩa thêm các đối tượng ba chiều động mới. Điều này cho phép các cộng đồng lập trình viên phát triển các mở rộng cĩ khả năng tương tác chuẩn cơ bản, cĩ các ánh xạ giữa các đối tượng VRML và các chức năng giao diện lập trình ứng dụng ba chiều (3D APIs). VRML và World Wide Web Phần mở rộng của tập tin VRML là .wrl (viết tắt từ “world”). Kiểu MIME chính thức cho tập tin VRML được định nghĩa như sau: “model/vrml” trong đĩ kiểu MIME chính cho các mơ tả dữ liệu 3D là “model”, kiểu MIME phụ cho các tài liệu VRML là “vrml”. (Ghi chú: MIME = Multipurpose Internet Mail Extensions) Trong trường hợp cần tạo khả năng tương thích với các phiên bản trước của VRML, kiểu MIME sau đây sẽ được dùng: “x-world/x-vrml” trong đĩ kiểu MIME chính là “x-world”, kiểu MIME phụ cho các tài liệu VRML là “x-vrml”. Một ví dụ về tập tin VRML: (Xin vui lịng xem ví dụ này ở phụ lục A mục 3) 2.1.2.10 HGML HGML (Hyper Graphics Markup Language) là ngơn ngữ đánh dấu siêu đồ họa, được xem là một định dạng nhỏ chuyên dùng cho băng thơng hẹp. HGML cho phép người dùng tải về các tài liệu giàu hình ảnh trên một đường truyền cĩ băng thơng hẹp. Hệ thống này sử dụng các thẻ để triệu gọi các hình ảnh SV ne t.vn Chương 2. Các vấn đề tổng quan 38 đồ họa được định nghĩa sẵn bên trong tập tin mà người dùng tải về. Nĩ được thiết kế dựa trên các ý tưởng chính như sau: • Các khuyến cáo của W3C HTML. • Đặc tả đơn giản. • Độc lập thiết bị và mạng. HGML đặc biệt thích hợp cho mạng điện thoại di động, truyền thơng khơng dây - ở những mơi trường mà băng thơng cho phép là rất nhỏ. Đặc tả HGML cĩ các chức năng chính được phân làm ba phần như sau: • Các đối tượng đồ họa cơ bản • Chủ đề / sử dụng lại hình ảnh sẵn cĩ • Chỉnh sửa ảnh (xin vui lịng xem phụ lục A mục 4 để biết thêm chi tiết về ba phần này) (Nguồn: 2.1.2.11 DrawML DrawML là một ứng dụng của XML 1.0. DrawML là một ngơn ngữ đồ họa khả co được thiết kế để làm cho việc tạo các ảnh kỹ thuật đơn giản trở nên dễ dàng. Xa hơn nữa (và quan trọng nhất) là DrawML tập trung vào qui trình lưu trữ và tinh chỉnh một ảnh vẽ. Một ảnh vẽ cĩ thể được cập nhật dễ dàng như tài liệu chứa nĩ. DrawML dựa trên các yêu cầu và tiêu chuẩn sau: • Khi một cấu trúc được thêm vào ảnh vẽ, người dùng cĩ thể định nghĩa các thuật tốn để quản lý việc định vị và thay đổi kích thước của các thành phần trực quan một cách tự động. • Ảnh vẽ thơng thường khơng phải là dạng WYSIWYG Lý do DrawML tập trung vào việc bảo trì chính là tính quan trọng của mạng Intranet ngày càng tăng. Cho đến nay, cơng nghệ Internet đã được sử dụng phần lớn trong việc ấn bản. Những người làm việc bên trong một mạng Intranet mong muốn tạo và thay đổi các tài liệu một cách nhanh chĩng. SV ne t.vn Chương 2. Các vấn đề tổng quan 39 Xin vui lịng xem phụ lục A mục 5 để biết thêm chi tiết về các mục sau: • Các thành phần trong ngơn ngữ DrawML: • Các khái niệm trong DrawML (Nguồn: 2.1.3 Mơ hình DOM Việc tương tác yêu cầu các thành phần riêng biệt của một trang web (gồm cả các đối tượng véc-tơ được hiển thị) phải cĩ khả năng phản hồi. Khơng cĩ hướng tiếp cận độc quyền nào ở trên đáp ứng được ý tưởng này. Để liên lạc với các đối tượng riêng biệt, cần phải cĩ một cây phân cấp đối tượng rõ ràng (cây phân cấp được mơ tả trong hình ở dưới). Trong cây phân cấp này, thành phần cao nhất (uppermost member) là trang web. Tất cả các đối tượng bên trong một trang web cho trước cĩ thể được liên lạc đến thơng qua cấu trúc cây này. Bên trong một trang web thơng thường, các sơ đồ phân cấp sau cĩ thể được áp dụng (sơ đồ này đã được đơn giản hĩa): Hình 2.5. Một ví dụ đơn giản về cây phân cấp DOM SV ne t.vn Chương 2. Các vấn đề tổng quan 40 Cây phân cấp đối tượng này được gọi là Mơ hình Đối tượng Tài liệu (DOM). Nĩ biểu diễn một phương pháp hiệu quả cho việc triệu gọi các thành phần của một trang web. Trong trường hợp của bản đồ, ý nghĩa của cây phân cấp cũng tương tự như vậy. Do đĩ một chuẩn véc-tơ mới cần phải tuân theo DOM. Ở mức ý niệm, các plugin cĩ thể được tích hợp vào trong DOM. Tuy nhiên, cây phân cấp nằm dưới một plugin thường thích hợp cho các chức năng tuyệt vời của plugin, và khơng được tạo ra để làm thuận tiện việc giao tiếp giữa plugin với tồn bộ mơi trường. Điểm này cực kỳ quan trọng cho việc tương tác và thường gây ra xung đột. 2.1.4 Ngơn ngữ XML Ý tưởng ban đầu ngơn ngữ XML chính là ngơn ngữ HTML (Hypertext Markup Language), một ngơn ngữ dùng để phân chia nội dung, cấu trúc và định dạng một cách chặt chẽ cho các phương tiện kết xuất khác nhau. CSS (Cascading Style Sheets) trong trường hợp này cĩ chức năng là trung tâm trình bày của các thành phần trong trang web, cũng giống như việc định vị chínhh xác một ảnh điểm. Việc truy cập thơng qua DOM được đảm bảo bởi một giao tiếp và cú pháp được chuẩn hĩa. XML là một chuẩn đa năng cho các tài liệu web cĩ cấu trúc, cho sự độc lập tối đa về mạng và hệ nền. Khi sử dụng XML, các tài liệu hồn tồn thích hợp cho việc trao đổi dữ liệu và cho các mọi loại ứng dụng. XML cĩ khả năng mở rộng nên đã trở thành nền tảng của các hình thức ngơn ngữ cao hơn như SMIL (đa phương tiện), SVG (đồ họa vec-tơ), MathML (các định dạng và ký hiệu tốn học đặc biệt), X3D (đồ họa 3 chiều), XHTML (hậu duệ của HTML), XFORM (phát sinh mẫu), GML (địa lý). Các mở rộng từ các tổ chức chuyên nghiệp hoặc thậm chí các cá nhân cĩ thể đem lại hiệu quả, miễn là DTD (Document Type Difinition = Định nghĩa kiểu tài liệu) được thêm vào. Một vài mở rộng được sử dụng đang được W3C chuyên nghiệp hĩa, chuẩn hĩa và quản lý. Chú thích: • SMIL = Synchronized Multimedia Language = Ngơn ngữ đa phương tiện đồng bộ hĩa SV ne t.vn Chương 2. Các vấn đề tổng quan 41 • SVG : Scalable Vector Graphics = Đồ họa véc-tơ khả co • MathML : Mathematical Markup Language = Ngơn ngữ đánh dấu tốn học Hình 2.6. Kiến trúc và hình thái XML Dữ liệu thực luơn sẵn sàng trong một tập tin XML, một tập tin được tạo thành từ các thực thể (được nhận biết thơng qua các thẻ “tag”) và các thuộc tính. Việc kiểm tra cấu trúc và cú pháp được thực hiện trong DTD (Document Type Difinition = Định nghĩa kiểu tài liệu). DTD định nghĩa các kiểu dữ liệu, các khơng gian tên (các thẻ định danh tác giả), cây phân cấp và phần giao giữa các ngơn ngữ. Các thành phần tùy chọn và các thuộc tính cĩ thể cĩ của chúng được định nghĩa ngang cấp nhau. Các DTD được các bộ phân tích (parser) sử dụng trong khi đĩ vẫn khả dụng trong tất cả các ngơn ngữ lập trình, cũng như trong các phiên bản mới của trình duyệt. Mục tiêu của DTD là kiểm tra các tập tin DTD và phát hiện lỗi. Các cơng nghệ liên quan XML gồm cĩ: • XSL (XstyleSheets): hậu duệ của CSS, cĩ khả năng định dạng nội dung • XLL (XlinkingLanguage): cĩ khả năng liên kết các thành phần và phương tiên lại với nhau • XQL (XqueryLanguage): cho phép truy vấn cĩ cấu trúc dữ liệu XML Danh sách này cĩ thể được mở rộng trong tương lai. Điều này cĩ nghĩa là các véc-tơ nên được biểu diễn theo phương thức tương thích với XML. SV ne t.vn Chương 2. Các vấn đề tổng quan 42 2.1.5 Tổng quan về GIS 2.1.5.1 Khái niệm GIS? GIS(Geographic information system-hệ thống thơng tin địa lý) là một hệ thống dữ liệu hỗ trợ con người quản lý, khai thác và sử dụng một cách hiệu quả các thơng tin địa lý. 2.1.5.2 Các thành phần của GIS Một hệ thống GIS gồm 4 thành phần cơ bản sau: - Phần cứng (hardware): máy tính được sử dụng để thực hiện các tác vụ của GIS. - Phần mềm (software): các phần mềm cung cấp các chức năng và cơng cụ về GIS. - Dữ liệu địa lý (geographic data): đây là thành phần quan trọng nhất, lưu trữ thơng tin địa lý. 2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thơng tin dữ liệu GIS 2.1.5.4 Chức năng của GIS GIS được thiết kế nhằm cho phép người sử dụng phân tích, truy vấn dữ liệu khơng gian. GIS tăng cường khả năng liên kết dữ liệu, tài nguyên với nhau. GIS cịn hỗ trợ giúp con người đưa ra các giải pháp tốt hơn trong các quá trình khảo sát địa lý, điều tra, giải quyết tranh chấp lãnh thỗ,… một cách trực quan và cĩ hiệu quả. GIS cho phép số hĩa lưu trữ dữ liệu bản đồ hết sức dễ dàng và linh hoạt, cho phép hiệu chỉnh dữ liệu một cách dễ dàng. Đồng thời từ đĩ cĩ thể sao chép và in ấn bản đồ. 2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS Với mơ hình quản lý dữ liệu khơng gian, GIS đĩng vai trị hết sức quan trọng trong rất nhiều lĩnh vực như: mơi trường, thủy văn, y tế, giao thơng, nơng nghiệp,… SV ne t.vn Chương 2. Các vấn đề tổng quan 43 GIS hỗ trợ thu thập thơng tin về tự nhiên như các tiến trình xĩa mịn đất, bảo tồn sinh thái, thay đổi khí hậu, thiên tai, lũ lụt, quản lý sủ dụng đất, nghiên cứu về đất trồng trọt, quản lý tưới tiêu, các vùng quy hoạch đơ thị, quản lý dân cư, phân tích địa bàn tội phạm, nghiên cứu dịch bệnh,… Một khả năng thiết thực và cĩ sức thu hút rất lớn hiện nay đĩ là ứng dụng của GIS trong giao thơng. Hỗ trợ định vị, di chuyển, xác định lộ trình trong vận tải hàng hải, đường bộ,… giải quyết ách tắc giao thơng. GIS gắn liền với hệ thống định vị tồn cầu GPS (Global Position System) - (đây là một cơng nghệ đang được sử dụng rộng rãi ở Mỹ và Canada) GIS cịn cĩ ý nghĩa rất lớn trong chính trị, quân sự. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 44 Chương 3 Cấu trúc định dạng tập tin SVG 3.1 Định nghĩa SVG là viết tắt của Scalable Vector Graphics (tạm dịch là đồ họa véc-tơ khả co). SVG là ngơn ngữ dành cho nội dung giàu dồ hoạ. SVG là ngơn ngữ mơ tả đồ họa véc-tơ hai chiều bằng ngơn ngữ XML (eXtensible Markup Languge- ngơn ngữ ngữ cĩ khả năng mở rộng). SVG cho phép ba loại đối tượng đồ họa: các hình học đồ họa véc-tơ (ví dụ, các đường thẳng và đường cong), các ảnh đồ họa và chữ. Các đối tượng đồ họa cĩ thể được nhĩm lại, được định kiểu, biến đối và được kết hợp từ các đối tượng được xây dựng trước đĩ .Tập tính năng của SVG bao gồm các phép biến đổi, các đường xén, mặt nạ trong suốt, các hiệu ứng lọc và các đối tượng mẫu. Ảnh đồ họa SVG khả tương tác và khả động. Các ảnh động cĩ thể được định nghĩa và kích hoạt bằng cách khai báo các thành phần ảnh động nhúng trực tiếp trong nội dung SVG hoặc bằng cách viết kịch bản (script). Các chương trình ứng dụng phức tạp với SVG cĩ thể được thực hiện dựa vào ngơn ngữ viết kịch bản (script) kèm theo để truy cập vào tất các thành phần trong mơ hình đối tượng tài liệu SVG (SVG DOM – SVG Document Object Model). Một tập đầy đủ các bộ quản lý sự kiện (event handlers) chẳn hạn onmouseover và onclick được gắn vào các đối tượng đồ họa để người dùng cĩ thể tương tác với các đối tượng đồ hoạ này. Do khả năng tương thích của nĩ với các chuẩn Web nên các tính năng như viết kịch bản cĩ thể được làm đồng thời ngay trên XHTML và SVG trong cùng một trong Web. 3.2 Sự tương thích với các chuẩn khác SVG tương thích với các chuẩn và các đặc tả W3C khác. Vì tương thích và thoả mãn với các chuẩn khác nên SVG trở nên mạnh mẽ và dễ dàng cho người dùng học hỏi và tích hợp SVG vào các trang Web của họ SVG tương thích với các kết quả khác của W3C là vì: SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 45 • SVG là một ứng dụng của XML và cĩ thể tương thích với XML 1.0 được đưa ra. • SVG tương thích với “các khơng gian tên (namespace)” trong XML được tiến cử. • SVG dùng ngơn ngữ liên kết XML (XML Linking Languge-XLINK) cho tham chiếu URL và mong muốn hỗ trợ các đặc tả URL cơ bản trong XML-base. • Cú pháp của SVG cho việc tham chiếu các ID thành phần là một tập con cĩ thể tương thích của cú pháp tham chiếu ID thành phần trong ngơn ngữ con trỏ XML (XML Pointer Language-XPointer). • Nội dung SVG cĩ thể định kiểu bằng các trang định kiểu phân cấp CSS (Cascading Style Sheets Level 2) hay các biến đổi XSL (XSL Transformation Version 1.0-XSLT). • SVG hỗ trợ cùng hướng tiếp cận và các thuộc tính đối với CSS và XSL, cộng thêm ngữ nghĩa và tính năng của CSS. • Các trang định kiểu bên ngồi được tham chiếu bằng cách dùng cơ chế kết hợp trang định kiểu với tài liệu XML 1.0. • SVG cĩ một mơ hình đối tượng tài liệu hồn chỉnh (DOM) và thoả DOM cấp 1 được đưa ra. SVG DOM cĩ mức tương thích và kiên định cao với HTML DOM được định nghĩa trong trong đặc tả DOM cấp 1. Hơn thế nữa, SVG DOM hỗ trợ và kết hợp với nhiều khả năng được mơ tả trong DOM cấp 2, bao gồm cả mơ hình đối tượng CSS và quản lý sự kiện. • SVG kết hợp nhiều tính năng và tiếp cận của ngơn ngữ tích hợp đa phương tiện khơng đồng bộ (Synchronized Multimedia Integration Language- SMIL1.0), bao gồm thành phần ‘switch’ và thuộc tính systemLanguage. • Các tính năng ảnh động của SVG được hợp tác phát triển với nhĩm nghiên cứu đa phương tiện khơng đồng bộ W3C (W3C Synchronized SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 46 Multimedia –SYMM Working Group), và các nhà phát triển của SMIL 1.0. Các tính năng ảnh động của SVG kết hợp và mở rộng các khả năng ảnh động XML mục đích chung được mơ tả trong đặc tả ảnh động SMIL (SMIL Animation). • SVG được thiết kế để trong tương lai các phiên bản của SMIL cĩ thể dùng SVG tĩnh hay động như các thành phần phương tiện truyền thơng (Animation). • SVG cố gắng để đạt được sự tương thích lớn nhất với của HTML 4 và XHTML 1.0. Nhiều khả năng của SVG được làm theo HTML, bao gồm cả việc sử dụng trang định kiểu CSS, sự tiếp cận việc quản lý sự kiện, và tiếp cận của nĩ với mơ hình đối tượng tài liệu (DOM). • SVG cĩ thể tương thích với các chuẩn W3C trong quá trình quốc tế hố các chuẩn. • SVG cĩ thể tương thích với các chuẩn W3C trong khả năng truy cập Web. • Trong các mơi trường hỗ trợ văn phạm XML khác (ví dụ, XHTML) cũng như hỗ trợ SVG và SVG DOM, thì tiếp cập viết kịch bản đơn giản cĩ thể được dùng đồng thời cho cả tài liệu SVG và đồ hoạ SVG, trong trường hợp đĩ hiệu ứng động và tương tác sẽ cĩ thể áp dụng trên nhiều khơng gian tên XML dùng cùng tập kịch bản. 3.3 Loại MIME của SVG và Khơng gian tên SVG 3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh: Loại MIME cho SVG là “image/svg+xml”. Việc đăng kí loại MIME này đang được tiến hành tại tổ chức W3C. Tập tin SVG cĩ mở rộng là “.svg” trên tất cả các hệ nền, và mở rộng cho tập tin nén của SVG là “.svgz” trên tất cả các hệ nền. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 47 Người ta khuyến cáo rằng, khi lưu trữ tập tin SVG trên hệ thống tập tin HFS của Macintosh thì nên lưu với mở rộng “svg” với khoảng trắng cuối, và tập tin SVG nén là “svgz”. 3.3.2 Khơng gian tên SVG, định danh cơng cộng và định danh hệ thống: Sau đây là khơng gian tên của SVG 1.1, định danh cơng cộng và định danh hệ thống. Khơng gian tên SVG: Định danh cơng cộng cho SVG 1.1: PUBLIC “-//W3C//DTD//DTD SVG 1.1//EN” Định danh hệ thống cho SVG 1.1 đã tiến cử: Sau đây là một ví dụ khai báo loại tài liệu cho một tài liệu SVG: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> Chú ý DTD được liệt kê trong định danh hệ thống là một DTD mơ-đun hố (nội dung của nĩ được trải ra trên nhiều tập tin), nghĩa là một bộ kiểm tra hiệu lực sẽ phải tìm về hết các mơ-đun để kiểm tra giá trị. Vì thế, cĩ một DTD đơn tương ứng với DTD mơ-đun hố cho SVG 1.1.Nĩ cĩ thể được tìm thấy tại địa chỉ 3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’ 3.4.1 Tổng quan: Một phân đoạn tài liệu SVG bao gồm các thành phần SVG chứa trong một thành phần ‘svg’. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 48 Một phân đoạn tài liệu SVG cĩ thể rỗng, nghĩa là thành phần ‘svg’ khơng cĩ nội dung gì cả. Một phân đoạn tài liệu SVG đơn giản chỉ chứa một thành phần đồ hoạ SVG đơn giản như thành phần ‘rect’ – hình chữ nhật. Một phân đoạn tài liệu SVG phức tạp cĩ thể bao gồm nhiều thành phần vật chứa và các thành phần đồ hoạ lồng vào nhau. Một phân đoạn tài liệu SVG cĩ thể đứng độc lập như là một tập tin SVG, hay là con của một thành phần ‘svg’ khác, trong trường hợp này thì phân đoạn tài liệu SVG cĩ thể xem là một tài liệu SVG, hoặc nĩ cĩ thể được nhúng nội tuyến trong một tài liệu XML cha. Sau đây là một ví dụ nội dung SVG đơn giản được nhúng nội tuyến trong một tài liệu XML cha. Chúng ta sẽ dùng khơng gian tên XML để chỉ định các thành phần ‘svg’ và ‘ellipse’ thuộc về khơng gian tên SVG tường minh. <parent xmlns="" xmlns:svg=""> Tiếp theo là một ví dụ phức tạp, gồm nhiều hình chủ nhật, của một tài liệu SVG độc lập. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 49 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="5cm" height="4cm" version="1.1" xmlns=""> Four separate rectangles <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> Kết quả trên trình duyệt sẽ là: Hình 3.1 Minh họa nội dung SVG được nhúng nội tuyến Các thành phần phần ‘svg’ cĩ thể xuất hiện ở giữa nội dung SVG. Đây là cơ chế để nhúng một phân đoạn tài liệu SVG vào một phân đoạn tài liệu SVG khác. Thành phần ‘svg’ cĩ thể xuất hiện giữa nội dung SVG để thiết lập khung nhìn mới cho phân đoạn tài liệu mới. Trong tất cả các trường hợp, để thoả mãn khơng gian tên ngơn ngữ XML đưa ra, thì khơng gian tên SVG phải được khai báo để các thành phần SVG được chỉ định thuộc về một khơng gian tên SVG. Sau đây là các cách khai báo khơng gian tên. Chúng ta cĩ thể dùng thuộc tính khơng gian tên xmlns khơng cĩ tiền tố khơng gian tên chỉ định trong thành phần ‘svg’. Khi đĩ SVG là một khơng gian SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 50 tên mặc định cho tất cả các thành phần trong phạm vi của thành phần ‘svg’ này với thuộc tính xmlns như sau: Nếu tiền tố khơng gian tên được chỉ định trong thuộc tính xmlns (ví dụ, xmlns:svg=””), thì khơng gian tên SVG khơng cịn là khơng gian tên mặc định nữa. Vì thế tiền tố khơng gian tên được gán rõ ràng cho mỗi thành phần trong phân đoạn tài liệu SVG đĩ: Và điều cuối cùng trong phần này cần lưu ý là các tiền tố khơng gian tên cũng cĩ thể được chỉ định trong thành phần cha mà khơng nhất thiết phải là thành phần ‘svg’. 3.4.2 Thành phần ‘svg’: Các thuộc tính của thành phần ‘svg’: xmlns:[:prefix] = “tên nguồn tài nguyên” Là thuộc tính XML chuẩn được dùng để định danh một khơng gian tên XML. version= “” Chỉ định phiên bản ngơn ngữ SVG mà phân đoạn SVG cĩ thể thoả mãn. Với SVG 1.0, thuộc tính này cĩ giá trị “1.0”. Đối với SVG 1.1, thuộc tính này nhận giá trị “1.1”. baseProfile= profile –name Thuộc tính này mơ tả hiện trạng ngơn ngữ SVG nhỏ nhất cần để xây dựng nội dung chính xác. Nĩ khơng chỉ định bất kỳ ràng buộc xử lý nào cho tác nhân người dùng (user agent); nĩ cĩ thể được xem là siêu dữ liệu .Ví dụ, giá trị thuộc tính này cĩ thể được SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 51 dùng bởi một cơng cụ tạo nội dung SVG để cảnh báo người dùng khi họ chỉnh sửa tài liệu vượt quá phạm vi của baseProfile được chỉ định. Mỗi tập tin hiện trạng SVG (baseProfile) nên định nghĩa một chuỗi tương ứng cho thuộc tính này. Mặc định giá trị thuộc tính này là ‘none’ được chỉ định. x=”” Thuộc tính này khơng cĩ ý nghĩa hay ảnh hưởng gì tới thành phần ‘svg’ ngồi cùng. Nĩ là toạ độ trục x gĩc trái trên của phạm vi hình chữ nhật (khung nhìn) mà thành phần ‘svg’ được nhúng vào sẽ được hiển thị. Giá trị mặc định là 0. y=”” Thuộc tính này khơng cĩ ý nghĩa hay ảnh hưởng gì tới thành phần ‘svg’ ngồi cùng. Nĩ là toạ độ trục y của gĩc trái trên của phạm vi hình chữ nhật mà thành phần ‘svg’ được nhúng vào sẽ được hiển thị. Giá trị mặc định là 0. width= “” Đối với các thành phần ‘svg’ phía ngồi thì thuộc tính này cho biết độ rộng thực sự của phân đoạn tài liệu SVG. Cịn đối với các thành phần ‘svg’ được nhúng vào thì đây là độ dài của phạm vi hình chữ nhật mà thành phần ‘svg’ này sẽ được đặt vào. Nếu giá trị thuộc tính này âm thì cĩ lỗi phát sinh. Giá trị mặc định là 100%. height = “” Đối với các thành phần ‘svg’ phía ngồi thì thuộc tính này cho biết chiều cao thực sự của phân đoạn tài liệu SVG. Cịn đối với các thành phần ‘svg’ được nhúng vào thì đây là chiều cao của phạm vi hình chữ nhật mà thành phần ‘svg’ này sẽ được đặt vào. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 52 Nếu giá trị này âm thì cĩ lỗi phát sinh. Giá trị mặc định là 100%. Nếu một tài liệu SVG được tham chiếu như một thành phần của tài liệu khác thì chúng ta nên thêm thuộc tính viewBox trong thành phần ‘svg’ ngồi cùng của tài liệu được tham chiếu. Thuộc tính này cung cấp một cách thuận tiện để thiết kế tài liệu SVG vừa vặn với một khung nhìn tuỳ biến chỉ định. 3.5 Gom nhĩm : thành phần ‘g’: Thành phần ‘g’ là một thành phần vật chứa để nhĩm các thành phần đồ hoạ với nhau. Khi gom nhĩm kết hợp với các thành phần ‘desc’- mơ tả và thành phần ‘title’ - tiêu đề sẽ cung cấp thơng tin về cấu trúc tài liệu và nhiều ngữ nghĩa hơn. Các tài liệu giàu cấu trúc sẽ tăng khả năng truy xuất hơn. Một nhĩm các thành phần, cũng như các đối tượng đơn lẻ, cĩ thể được cung cấp một định danh bằng thuộc tính id. Việc đặt tên nhĩm là cần thiết trong trường hợp tạo ảnh động hay các đối tượng dùng lại. Ví dụ: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="5cm" height="5cm" version="1.1" xmlns=""> Two groups, each of two rectangles <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 53 Kết quả trên trình duyệt sẽ là: Hình 3.2. Minh họa thành phần gom nhĩm ‘g’ Một thành phần SVG cĩ thể chứa các thành phần ‘g’ lồng vào trong nĩ đến một độ sâu thích hợp. Ví dụ: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="4in" height="3in" version="1.1" xmlns=""> Groups can nest Cịn bất kỳ thành phần SVG nào khơng chứa trong thành phần ‘g’ thì đựơc xem như là một nhĩm riêng. 3.6 Tham chiếu và thành phần ‘defs’: 3.6.1 Tổng quan: SVG mở rộng khả năng dùng các tham chiếu URI tới các đối tượng khác. Ví dụ, để tơ một hình chữ nhật với màu tuyến tính, thì trước tiên chúng ta cần định nghĩa một thành phần 'linearGradient' và gán cho nĩ một ID như sau: SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 54 ... Sau đĩ trong thành phần ‘rect’ chúng ta cĩ thể dùng thuộc tính ‘fill’ tham chiếu tới thành phần ‘linearGradient’ trên như sau: Tham chiếu URI được định nghĩa theo các dạng sau: = [ | ] [ "#" ] -hay- = [ | ] [ "#xpointer(id(" "))" ] là định danh của thành phần được tham chiếu là URI tuyệt đối là URI tương đối # và #xpointer(id()) là các phát biểu theo cú pháp tương thích với ngơn ngữ con trỏ XML (XML Pointer Language - XPointer). SVG hỗ trợ hai kiểu tham chiếu URI: • Tham chiếu URI cục bộ (local URI references), khi đĩ tham chiếu URI khơng chứa hay và do đĩ chỉ chứa định danh của phân đoạn được tham chiếu là #elementID hay #xpointer(id). • Tham chiếu URI khơng cục bộ (non-local URI references), khi đĩ tham chiếu URI chứa hoặc hoặc Sau đây là các nguyên tắc xử lý của tham chiếu URI: • Các tham chiếu URI tới các nút (node) khơng tồn tại sẽ xem như một tham chiếu khơng hợp lệ. • Các tham chiếu URI tới các thành phần khơng đúng với tham chiếu được cho cũng sẽ được xem như một tham chiếu khơng hợp lệ, ví dụ thuộc tính ‘clip-path’ chỉ cĩ thể tham chiếu tới thành phần ‘clipPath’. Thiết lập thuộc tính clip-path:url(#MyElement) là một tham chiếu SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 55 khơng hợp lệ nếu thành phần được tham chiếu (MyElement) khơng phải là ‘clipPath’. • Tham chiếu URI tham chiếu trực tiếp hay gian tiếp ngược trở lại nĩ là một tham chiếu vịng khơng hợp lệ. Như vậy SVG cĩ các thành phần và thuộc tính cho phép tham chiếu và cũng cĩ các thanh phần và thuộc tính khơng cho phép tham chiếu. Đối với các thành phần được tham chiếu thì sẽ cĩ thành phần được tham chiếu là hợp lệ cho tham chiếu này nhưng khơng hợp lệ cho tham chiếu khác tới nĩ. Sau đây sẽ là phần liệt kê mơ tả một số thành phần và thuộc tính cho phép tham chiếu và các đích tham chiếu hợp lệ cho các tham chiếu đĩ: • Thành phần ‘a’ cĩ thể tham chiếu tới bất kỳ nguồn tài nguyên cục bộ hay khơng cục bộ nào đĩ. • Thành phần ‘altGlyph’ phải tham chiếu tới thành phần ‘altGlyphDef’ hay một thành phần ‘glyph’. • Thành phần ‘animate’ (xin vui lịng xem phần mơ tả chi tiết thành phần ‘animate’ trong đặc tả SVG của W3C). • Thành phần ‘animateColor’ (xin vui lịng xem phần mơ tả chi tiết thành phần ‘animate’ trong đặc tả SVG của W3C). • Thành phần ‘animateTransform’ (xin vui lịng xem phần mơ tả chi tiết thành phần ‘animate’ trong đặc tả SVG của W3C). • Thuộc tính ‘clip-path’ phải tham chiếu tới một thành phần ‘clipPath’. • Thuộc tính ‘cursor’ phải tham chiếu tới một nguồn tài nguyên cung cấp một hình ảnh cho con trỏ chuột. • Thành phần ‘felImage’ phải tham chiếu tới nguồn tài ngyên cục bộ hay khơng cục bộ. • Thuộc tính ‘fill’ tham chiêu tới một thành phần ‘linearGradient’…. • Thành phần ‘filter’ phải tham chiếu tới một thành phần ‘filter’. • Thuộc tính ‘filter’ phải tham chiếu đến một thành phần ‘filter’. SV ne t.vn Chương 3. Cấu trúc định dạng tập tin SVG 56 • Thành phần ‘image’ phải tham chiếu một nguồn tài nguyên cục bộ hay khơng cục bộ. • Thành phần ‘linearGradient’ phải tham chiếu tới một thành phần ‘linearGradient’ hay ‘radialGradient’. • Thuộc tính ‘marker’, ‘marker-start’, ‘marker-mid’ và ‘marker-end’ phải tham chiếu tới một thành phần ‘marker’. • Thuộc tính ‘mask’ phải tham chiếu tới một thành phần ‘mask’. • Thành phần ‘pattern’ phải tham chiếu tới một thành phần ‘linear