TÌM HIỂU SVG VÀ ỨNG DỤNG - 3 doc

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 toà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 hoàn toà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 toá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








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

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








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ị
toà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ự.

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








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

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ế
hoá 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.








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 hoá
(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 hoá 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’.








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.

<?xml version="1.0" standalone="yes"?>
<parent xmlns=""
xmlns:svg="
<! parent contents here >
<svg:svg width="4cm" height="8cm" version="1.1">
<svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
</svg:svg>
<! >
</parent>

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.

Chương 3. Cấu trúc định dạng tập tin SVG
49

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="5cm" height="4cm" version="1.1"
xmlns="
<desc>Four separate rectangles
</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<! Show outline of canvas using 'rect' element >
<rect x=".01cm" y=".01cm" width="4.98cm"
height="3.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>

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








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:
<svg xmlns=" >
<rect />
</svg>

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 đó:
<svg:svg xmlns:svg=" >
<svg:rect />
</svg: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= “<number>”
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








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=”<coordinate>”
Thuộc tính này không có ý nghĩa hay ảnh hưởng gì tới thành phần
‘svg’ ngoà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=”<coordinate>”
Thuộc tính này không có ý nghĩa hay ảnh hưởng gì tới thành phần
‘svg’ ngoà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= “<length>”
Đối với các thành phần ‘svg’ phía ngoà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 = “<length>”
Đối với các thành phần ‘svg’ phía ngoà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.

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’ ngoà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ụ:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="5cm" height="5cm" version="1.1"

xmlns="
<desc>Two groups, each of two rectangles
</desc>
<g id="group1" fill="red" >
<rect x="1cm" y="1cm" width="1cm" height="1cm" />
<rect x="3cm" y="1cm" width="1cm" height="1cm" />
</g>
<g id="group2" fill="blue" >
<rect x="1cm" y="3cm" width="1cm" height="1cm" />
<rect x="3cm" y="3cm" width="1cm" height="1cm" />
</g>
<! Show outline of canvas using 'rect' element >
<rect x=".01cm" y=".01cm" width="4.98cm"
height="4.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>









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ụ
:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="4in" height="3in" version="1.1"
xmlns="
<desc>Groups can nest
</desc>
<g>
<g>
<g>
</g>
</g>
</g>
</svg>

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:

Chương 3. Cấu trúc định dạng tập tin SVG
54

<linearGradient id="MyGradient"> </linearGradient>
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:
<rect style="fill:url(#MyGradient)"/>

Tham chiếu URI được định nghĩa theo các dạng sau:
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#"
<elementID> ] -hay-
<URI-reference> = [ <absoluteURI> | <relativeURI> ]
[

"#xpointer(id(" <elementID> "))" ]

<elementID> là định danh của thành phần được tham chiếu
<absoluteURI> là URI tuyệt đối
<relativeURI> là URI tương đối
#<elementID> và #xpointer(id(<elementID>)) 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 <absoluteURI> hay <relativeURI> và do đó chỉ chứa
định danh của phân đoạn được tham chiếu là #elementID hay
#xpointer(id<elementID>).

• Tham chiếu URI không cục bộ (non-local URI references), khi đó
tham chiếu URI chứa hoặc <absoluteURI> hoặc <relativeURI>
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








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

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
‘linearGradient’ hay thành phần ‘radialGradient’.
• Thành phần ‘script’ phải tham chiếu tới nguồ
n tài nguyên bên ngoài
cung cấp nội dung script.
• Thuộc tính ‘stroke’ tham chiếu tới một màu nào hay thành phần màu
nào đó như ‘linearGradient’ chẳng hạn.
• Thành phần textpath phải tham chiếu tới một thành phần ‘path’.
• Thành phần ‘tref’ có thể tham chiếu tới bất kỳ thành phần SVG nào.
• Thành phần ‘set’ sẽ được nhắc đến trong phần mô tả chi tiết thành
phần ‘animate’.
• Thành phần ‘use’ 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.
Sau đây là các quy tắc dùng xử lý các tham chiếu URI không hợp lệ:
• Một tham chiếu URI cục bộ không hợp lệ (nghĩa là một tham chiếu
tới một nút trong tài liệu hiện tại) sẽ phát sinh một lỗi, ngoại trừ thuộc
tính xlink:href trong thành phần ‘a’ và thuộc tính cho phép dữ liệu
phòng hờ trường hợp giá trị tham chiếu URI không hợp lệ.
• Một tham chiếu vòng không hơp lệ sẽ phát sinh m
ột lỗi.

• Khi thuộc tính externalResourcesRequired được thiết lập là ‘true’
trong thành phần đang tham chiếu hay là một trong các thành phần
cha của nó thì một tham chiều URI ngoại không được đáp lại sẽ phát








Chương 3. Cấu trúc định dạng tập tin SVG
57

sinh một lỗi (ví dụ , trường hợp một nguồn tài nguyên không thể định
vị được).
Như vậy để tránh việc tham chiếu ngoại dễ phát sinh lỗi thì bất kỳ khi nào có
thể chúng ta nên định nghĩa các thành phần được tham chiếu bên trong thành
phần ‘defs’. Cụ thể là các thành phần thường được tham chiếu như:
'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask',
'pattern', 'radialGradient' và 'symbol'. Định nghĩa các thành phầ
n này trong thành
phần ‘defs’ làm cho nội dung SVG dễ hiểu và tăng khả năng truy xuất hơn đặt
chúng trong một tài liệu bên ngoài khác.
3.6.2 Các thuộc tính tham chiếu URI:
Tham chiếu URI sẽ được chỉ định trong thuộc tính ‘href’ trong không gian
tên XLINK. Nếu tiền tố mặc định ‘xlink:’ được dùng cho các thuộc tính trong
không gian tên XLink thì thuộc tính đó phải được chỉ định là xlink:href. Giá trị
của thuộc tính này là một tham chiếu URI đến một nguồn tài nguyên (phân đoạn
tài nguyên) mong muốn. Nhưng để th

ỏa không gian tên trong XML thì cần khai
báo không gian tên XLink rõ ràng khi dùng các thuộc tính XLink trong nội dung
SVG. Cách đơn giản nhất để khai báo không gian tên XLink là dùng thuộc tính
xmlns trong thành phần ‘svg’ ngoài cùng của nội dung bên trong dùng thuộc
tính Xlink.
Ví dụ
:
<svg xmlns:xlink=" >
<image xlink:href="foo.png" />
</svg>

Ngoài thuộc tính xlink:href còn có các thuộc tính XLink khác có thể được
chỉ định để cung cấp thông tin bổ sung về nguồn tài nguyên được tham chiếu,
nhưng không được trình bày ở đây.









Chương 3. Cấu trúc định dạng tập tin SVG
58

3.6.3 Thành phần ‘defs’
Thành phần ‘defs’ là một thành phần vật chứa các thành phần được tham
chiếu. Người ta khuyên nên định nghĩa các thành phần được tham chiếu bên
trong thành phần ‘defs’ để dễ hiểu bất kỳ khi nào nếu có thể.

Mô hình nội dung của thành phần ‘defs’ tương tự của thành phần ‘g’. Do đó
thành phần ‘g’ chứa được thành phần nào (là con của thành phần ‘g’ này) thì
thành phần ‘defs’ có thể chứa những thành phần đó và ngược lại.
Các thành phần con c
ủa ‘defs’ không được trực tiếp hiển thị; chúng không
tham gia vào cây hiển thị. Như vậy thành phần ‘def’ chính là thành phần ‘g’ với
thuộc tính ‘display’ được thiết lập là ‘none’. Tuy các thành phần con của ‘defs’
không tham gia vào cây trình diễn nhưng nó luôn có mặt trong cây nguồn. Do đó
các thành phần khác có thể tham chiếu tới nó. Đồng thời giá trị thuộc tính
‘display’ của thành phần ‘defs’ hay bất kỳ thuộc tính nào của thành phần con
đều không ảnh hưởng tới việc một thành phần khác tham chiếu tới nó.
Ví dụ:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="8cm" height="3cm"
xmlns="
<desc>Local URI references within ancestor's 'defs'
element.</desc>
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm"
fill="url(#Gradient01)" />
<! Show outline of canvas using 'rect' element >
<rect x=".01cm" y=".01cm" width="7.98cm"
height="2.98cm"

fill="none" stroke="blue" stroke-width=".02cm" />
</svg>










Chương 3. Cấu trúc định dạng tập tin SVG
59

Kết quả trên trình duyệt sẽ là:
Hình 3.3 Minh họa thành phần ‘defs’
Trong tài liệu trên, một thành phần linearGradient được định nghĩa trong
thành phần ‘defs’ là con của thành phần ‘svg’, và là cha của thành phần ‘rect’
tham chiếu tới thành phần linearGradient.
Như vậy các thành phần tham chiếu được đặt trong thành ‘defs’ nhưng như
thế nào để dễ hiểu nhất ? Tốt nhất là đặt các thành phần được tham chiếu trong
thành phần ‘defs’ là con trực tiếp của một trong số các thành phần cha của thành
phần tham chiếu tới nó. Và ví dụ trên được xây dự
ng trên nguyên tắc này.
Hình sau minh họa cho ví dụ trên:
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

3.7 Thành phần ‘desc’ và ‘title’:

Mỗi thành phần vật chứa hay thành phần đồ họa trong SVG có thể cung cấp
một chuỗi mô tả bằng thành phần ‘desc’ hay ‘title’. Khi phân đoạn tài liệu SVG
…
svg
defs
linearGradien
rect
…