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: http://www.w3.org/2000/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ử: http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 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ỉ http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd. 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="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. 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" "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 [...]... version="1.0" standalone="no"?> Local URI references within ancestor's 'defs' element. ... 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ụ: Groups can nest < /svg> Còn bất kỳ thành phần SVG nào không chứa trong thành... ràng cho mỗi thành phần trong phân đoạn tài liệu SVG đó: < /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à... dụ: Two groups, each of two rectangles ...Chương 3 Cấu trúc định dạng tập tin SVG 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> 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... tài liệu SVG Còn đối với các thành phần svg được nhúng vào thì đây là độ dài của phạm vi hình chữ nhật mà thành phần svg này sẽ được đặt vào Nếu giá trị thuộc tính này âm thì có lỗi phát sinh Giá trị mặc định là 100% height = “” Đối với các thành phần svg phía 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ì... x="1cm" y="3cm" width="1cm" height="1cm" /> < /svg> 52 Chương 3 Cấu trúc định dạng tập tin SVG 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ể... 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: 53 Chương 3 Cấu trúc định dạng tập tin SVG ... y=".01cm" width="7.98cm" height="2.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> < /svg> 58 Chương 3 Cấu trúc định dạng tập tin SVG 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... thành phần svg này sẽ được đặt vào 51 Chương 3 Cấu trúc định dạng tập tin SVG 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 . 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í. cho SVG 1.1 đã tiến cử: http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd 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". 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ỉ http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1-flat.dtd.