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’.
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="http://example.org"
xmlns:svg="http://www.w3.org/2000/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.
49
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <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
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="http://www.w3.org/2000/svg"...> <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=”http://www.w3.org/2000/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="http://www.w3.org/2000/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
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’ 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=”<coordinate>”
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= “<length>”
Đố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 = “<length>”
Đố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.
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.