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 ĐOÀN - 0112083
LÊ ANH TOÀ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

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


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

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.
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


3.4.2 Thành phần ‘svg’: 50
3.5 Gom nhóm : thành phần ‘g’: 52
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

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


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

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

Chương 1. Mở đầ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 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.

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


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ụ 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:
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
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)