Tìm hiểu svg và ứng dụng

Tài liệu tham khảo công nghệ thông tin Tìm hiểu svg và ứng dụng

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN

NIÊN KHÓA 2001 - 2005

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

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

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 hoà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 đồ?

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

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

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.10Thành phần ‘image’: 74

3.11Cá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.12Hệ 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.15Thà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.16Thành phần ‘text’ 122

3.16.1 Giới thiệu 122

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.17Vẽ 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.18Khả 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.19Viế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

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

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

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

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

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

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 (http://www.ioit-hcm.ac.vn/map/index.html)

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

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

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:

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ụ

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

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

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 ngoà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

(Xin vui lòng xem phụ lục A mục 1 để biết thêm về phần này)

(Nguồn: http://www.softsource.com/svf/ )

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 ngoà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 Ngoà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

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ỉ http://www.autodesk.com

(Nguồn: http://www.autodesk.com )

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 toàn bộ tập tin

đượ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 ngoà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

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 đoà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ể

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

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

Đ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 hoà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 toàn bộ dữ liệu này)

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à soá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;

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

Ngoà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

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

2.1.2.8 SVG

SVG (Scalable Vector Graphics) là một định dạng mới và mở hoàn toà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 hoàn toà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

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)

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

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 hoà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

• 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 hoàn toà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 hoà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 toá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 <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>

2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

3

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 ngoà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’ để hoàn chỉnh tài liệu SVG đúng hình thức

(Nguồn: http://www.w3.org/Graphics/SVG/Overview.html )

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

<desc>Example toap01 - simple text on a path</desc>

<use xlink:href="#MyPath" fill="none" stroke="red" />

<text font-family="Verdana" font-size="42.5" fill="blue" >

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

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:

đồ 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

• 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 toá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

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: http:// www.w3.org/TR/1998/NOTE-drawml-19981203 )

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