Giới thiệu về SVG và ứng dụng của nó
MỤC LỤC
Các vấn đề tổng quan
Chuẩn bất thành văn
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. 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.
Các định dạng của véc-tơ
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. 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.
Mô hình 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. 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.
Ngôn ngữ 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. 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.
Cấu trúc định dạng tập tin SVG
Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh
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. 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”.
Thành phần ‘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. 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.
Các thuộc tính tham chiếu URI
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’. Đị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.
Thành phần ‘defs’
Một sự kiện sẽ nhân lên qua các phần không thực sự cũng như thực sự hiện hữu của cây của cây tài liệu giống như cây tài liệu bình thường: đầu tiên sự kiện sẽ đi từ thành phần gốc (root) xuống thành phần ‘use’ và sau đó đi qua các thành phần của cây không thực sự tồn tại trong pha bắt sự kiện. Ví dụ, nếu ảnh được tham chiếu là PNG hay JPEG và thuộc tính preserveAspectRatio = “xMinYmin meet”, thì tỉ lệ cạnh của ảnh quét sẽ bảo toàn, ảnh quét sẽ được định kích thước lớn nhất có thể mà vẫn đảm bảo toàn bộ ảnh quét được hiển thị trong khung nhìn mà thành phần ‘image’ thiết lập.
Hình e-lip – thành phần ‘ellipse’
Ví dụ sau xây dựng hai hình e-lip trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’ và thuộc tính.
Đa giác – thành phần ‘polygon’
Một không gian người dùng (nghĩa là một hệ trục toạ độ hiện tại mới) có thể được thiết lập tại bất kỳ nơi nào trong một phân đoạn tài liệu SVG bằng các phép biến đổi (transformations) dưới dạng các ma trận biến đổi (transformation matrices) hay các phép biến đổi đợn như phép quay (rotate), xiên (xskew, yskew), tỉ lệ (scale) và tịnh tiến (translate). Thiết lập một không gian người dùng mới bằng các phép biến đổi hệ trục toạ độ là nền tảng cho đồ họa 2D, cung cấp một phương thức thông thường cho việc kiểm soát kích thước, vị trí, góc quay, độ xiên của các đối tượng đồ hoạ.
Khung nhìn ban đầu
• Nội dung SVG là một tài nguyên được lưu trữ độc lập và được nhúng bằng tham chiếu (chẳng hạn, nhúng vào tài liệu XHTML qua thành phần ‘object’), hoặc nội dung SVG được nhúng trong một tài liệu chứa. Tương tự, nếu có các thuộc tính định vị được chỉ định trong thành phần tham chiếu tới tập tin SVG hay trên thành phần ‘svg’ ngoài cùng tài liệu chứa có khả năng thiết lập chiều rộng của khung nhìn, thì khi đó các thuộc tính định vị này sẽ thiết lập chiều rộng của khung nhìn; ngược lại, thuộc tính ‘height’ trên thành phần.
Hệ trục toạ độ ban đầu
Trong ví dụ sau, một ảnh SVG được nhúng nội tuyến trong một tài liệu XML được định dạng theo CSS. Bởi vì các thuộc tính định vị CSS khộng được cung cấp trong thành phần ‘svg’ ngoài cùng, nên thuộc tính width= “100px” và height =.
Các phép biến đổi hệ trục toạ độ
Dùng phép biến đổi tỉ lệ (sclale) và quay (rotate), ví dụ sau định nghĩa hai hệ trục toạ độ người dùng mới. Ví dụ 5: Định nghĩa hai hệ trục toạ độ được biến đổi xiên tương đối với hệ trục toạ độ nguyên thủy.
Thuộc tính ‘transform’
• rotate(<rotate-angle>[<cx><y>]) được dùng để định nghĩa một phép quay quanh một điểm được cho trước <rotate-angle> độ. Khi áp dụng mảng các phép biến đổi thì kết quả cũng giống như khi áp dụng các phép biến đổi riêng rẽ theo trình tự trong mảng.
Thuộc tính ‘viewBox’
Không giống thuộc tính ‘transform’, các phép biến đổi tự động được tạo bởi sự có mặt của thuộc tính ‘viewBox’ không ảnh hưởng đến thuộc tính ‘x’, ‘y’, ‘width’,. ‘height’ (hay trong trường hợp thành phần ‘marker’, là thuộc tính ‘markerWidth’,. ‘markerHeight’) trên thành phần chứa thuộc tính ‘viewBox’ đó.
Thuộc tính ‘preserveAspectRatio’
Tham số <meetOrSlice> là tham số tuỳ chọn, nếu được cung cấp, nó sẽ được tách biệt với giá trị <align> bởi một hay nhiều khoảng trắng. Trong trường hợp này, nếu tỉ lệ cạnh của ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn thì một phần của ‘viewBox’ không hiển thị trong khung nhìn.
Thiết lập khung nhìn
• Thành phần ‘image’ tham chiếu tới một tập tin SVG sẽ thiết lập một khung nhìn tạm thời vì trong nguồn tài nguyên được tham chiếu có một thành phần ‘svg’. • Thành phần ‘foreignObject’ (thành phần này không được mô tả trong phạm vi tìm hiểu) tạo một khung nhìn mới để hiển thị nội dung trong thành phần này.
Định kiểu bằng CSS
Đặt trang định kiểu CSS trong khối CDATA đôi khi cần thiết vì trang định kiểu CSS có thể các chứa kí tự , ví dụ ‘>’, xung đột với bộ phân tích SVG. Tương tự như thuộc tính ‘style’ trong HTML (ngôn ngữ đánh dấu siêu văn bản), định kiểu CSS nội tuyến được khai báo trong thuộc tính ‘style’ trong SVG bằng cách chỉ định một danh sách các phần tử cách nhau bởi dấu phẩy (‘,’), mỗi phần tử là một khai báo thuộc tính dạng “tên thuộc tính : giá trị”.
Phạm vi của trang định kiểu
Ở mức khái niệm, bất kỳ phần nào nằm ngoài vùng bao của đường xén đang được kích hoạt sẽ không được vẽ. Một đường xén có thể được hiểu là như một mặt nạ có các điểm ảnh bên ngoài đường xén là màu đen với giá trị trong suốt là “0” và các điểm ảnh bên trong đường xén là màu trắng với giá trị trong suốt là “1”.
Thuộc tính ‘overflow’ và ‘clip’
• Khi thành phần ‘svg’ ngoài cùng được nhúng nội tuyến trong một văn phạm XML cha dùng trang định kiểu phân lớp CSS hoặc trang định dạng XSL: nếu thuộc tính ‘overflow’ có giá trị ‘hidden’ hay ‘scroll’, thì tác nhân người dùng sẽ thiết lập một đường xén bằng với đường bao của khung nhìn ban đầu. • Khi thành phần ‘svg’ ngoài cùng là một tài liệu độc lập hay được nhúng nội tuyến trong văn phạm XML cha không dùng trang định kiểu phân lớp CSS hay trang định dạng XSL, thì thuộc tính ‘overflow’ trên thành phần ‘svg’ ngoài cùng bị bỏ qua.
Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’
Như kết quả ở trên, ứng xử mặc định của tác nhân người dùng SVG là thiết lập một đường xén ứng với đường bao của khung nhìn ban đầu và thiết lập một đường xén mới cho mỗi thành phần thiết lập khung nhìn mới và mỗi thành phần ‘pattern’. Giá trị “auto” định nghĩa một đường xén trùng với đường bao của khung nhìn được tạo bởi thành phần cho sẵn.
Thiết lập đường xén mới
‘clipPath’ sẽ cung cấp giá trị theo hệ trục toạ độ hiện tại, nơi mà thành phần ‘clipPath’ được tham chiếu (nghĩa là hệ trục toạ độ của thành phần tham chiếu tới thành phần ‘clipPath’ thông qua thuộc tính ‘clip- path’). Thuộc tính ‘display’ không áp dụng cho thành phần ‘clipPath’; do đó thành phần ‘clipPath’ không được hiển thị trực tiếp thậm chỉ thuộc tính ‘display’ được thiết lập khác “none”, và thành phần ‘clipPath’ sẵn sàng cho tham chiếu thậm chí khi thuộc tính ‘display’ trên thành phần ‘clipPath’ hay bất kỳ thành phần cha của nó được thiết lập thành “none”.
Dữ liệu đường (path data)
Chỉ thị M tương ứng với lệnh “moveto”, L tương ứng với “lineto”, z tương ứng với “closepath”.
Giới thiệu
• Mô tả văn bản trong một không gian tên XML khác (XHTML chẳng hạn) sau đó nhúng nội tuyến trong một thành phần ‘foreignOject’. Chuỗi văn bản trong thành phần ‘text’ có thể được hiển thị trên một hàng thẳng, hay dọc theo hình dạng của một thành phần ‘path’.
Thành phần ‘text’
Sau khi nét vẽ tương ứng với kí tự cho sẵn được xây dựng xong, vị trí văn bản hiện tại được cập nhật cho kí tự kế tiếp.Trong trường hợp đơn giản nhất, vị trí văn bản hiện tại bằng vị trí hiện tại trước đó cộng với giá trị tăng lên do nét vẽ gây ra (theo chiều ngang hay chiều dọc). Thiết lập độ dịch chuyển dọc theo trục x so với vị trí văn bản hiện tại cho các kí tự trong thành phần ‘text’ này hay bất kỳ thành phần con nào của nó.
Thuộc tính thiết lập phông chữ cho thành phần ‘text’
Trong tài liệu SVG, nếu <length> được cung cấp mà không có đơn vị chỉ định (ví dụ, giá trị 128) thì tác nhân người dùng hiểu <length> là giá trị chiều cao của chữ trong hệ trục toạ độ người dùng hiện tại. Nếu <length> được cung cấp với một đơn vị chỉ định cụ thể (ví dụ, 12pt hoặc 10%), thì tác nhân người dùng sẽ chuyển <length> sang giá trị tương ứng trong hệ trục toạ độ người dùng hiện tại.
Thuộc tính canh lề
<absolute-size> | <relative-size> |<length> | <percentage> | inherit Thuộc tính này dùng để chỉ định kích thước phông chữ hiển thị cho văn bản. Thuộc tính này dùng để chỉ định giá trị riêng cho một thành phần để bảo toàn chiều cao của phông chữ được chọn đầu tiên trong phông chữ thay thế.
Thành phần ‘tspan’
Ví dụ 2: Ví dụ sau dùng thuộc tính ‘dx’ và ‘dy’ trên thành phần ‘tspan’ để hiệu chỉnh vị trí văn bản hiện tại cho chuỗi văn bản đặc biệt trong thành phần ‘text’. Ví dụ 3: Ví dụ sau dùng thuộc tính ‘x’ và ‘y’ trên thành phần ‘tspan’ để thiết lập vị trí mới cho mỗi kí tự trong chuỗi.
Thành phần ‘tref’
Ngoài khả năng vẽ chữ trên một hàng thẳng, SVG còn hỗ trợ khả năng vẽ chữ dọc theo hình dáng của một thành phần ‘path’. Thành phần này có một thuộc tính ‘xink:href’ chứa một tham chiếu URI tới một thành phần ‘path’ sẽ được dùng làm khung cho nội dung văn bản hiển thị trên đó (thành phần ‘path’ này không được hiển thị trên màn hình ).
Thành phần ‘textPath’
Nếu <uri> là một tham chiếu không hợp lệ (ví dụ, thành phần được tham chiếu không tồn tại hoặc thành phần được tham chiếu không phải là thành phần ‘path’) thì nó gây ra lỗi và toàn bộ nội dung sẽ không được tác nhân người dùng hiển thị. Các toạ độ trong dữ liệu đường (path data) của thành phần ‘path’ được tham chiếu được tính theo đơn vị của hệ trục toạ độ như của thành phần ‘text’, mà không theo tính theo đơn vị của hệ trục toạ độ nơi thành phần ‘path’ được định nghĩa.
Giới thiệu
• Trong tương lai, phiên bản mới của SMIL sẽ được mô-đun hoá và các thành phần của nó có thể được dùng kết hợp với văn phạm SVG và văn phạm XML khác để đạt được các hiệu ứng động.
Các thành phần ảnh động .1 Tổng quan
• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và đôi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tài liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt.
Ví dụ ảnh động
Tuy nhiên, các thành phần ‘svg’ được lồng trong một tài liệu SVG sẽ không tạo thành phân đoạn tài liệu trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị trí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phân đoạn tài liệu được cho.
Chỉ định ngôn ngữ viết script
Giá trị mặc định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript”. chưa được đăng kí là một loại phương tiện cho ECMAScript ). Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng biệt bằng thuộc tính ‘type’ trên thành phần ‘script’.
Thành phần ‘script’
Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các. Giá trị này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được đăng kí.
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
GEOSERVER
Bằng các đoạn script, client có thể nhận và xử lý một số tương tác ngay tại client như thao tác chọn vùng bản đồ quan tâm, chọn điểm đầu, điểm cuối khi tìm đường đi được tính toán và kiểm tra giá trị trước khi yêu cầu server xử lý sẽ làm thiểu bớt những xử lý không cần thiết phải làm phiền đến server. Các yêu cầu đó là : getMap (lấy bản đồ) theo một số ràng buộc về vùng bản đồ cần lấy, số tính năng cần lấy…, và getBestPath (tìm đường đi ngắn nhất)….Server sử dụng dịch vụ của GeoServer để tạo bản đồ và tra cứu thông tin của đối tượng địa lý.
SQL SERVER
Mô t ả chi tiết client
SVG có một đặc tính là định dạng véc-tơ được thiết kế sao cho các thành phần bên trong nội dung có thể tương tác trực tiếp với người sử dụng thông qua cây phân cấp DOM (Document Object Model) (Mô hình đối tượng tài liệu). Khi người sử dụng nhấn chuột lên một thành phần (chẳng hạn như một con đường) thì thành phần đó sẽ tự động phát sinh một sự kiện và gửi lên nút trên cùng trong cây phân cấp DOM.
Server
Tìm đường đi từ giữa hai điểm
Khi đã xác định được tọa độ hai điểm mà người dùng cần tìm đường đi giữa chúng, client sẽ gửi câu lệnh yêu cầu server thực hiện việc tìm kiếm đường đi với đỉnh đầu và đỉnh cuối là hai điểm trên. Thông tin trả về là một tập các tọa độ kề nhau để đi từ điểm A đến điểm B, với A,B là hai điểm đã được chọn để tìm kiếm đường đi.
Vấn đề thay đổi tỉ lệ phóng to thu nhỏ
Sau khi việc tìm đường đã hoàn tất, server thông báo lại kết quả cho client cũng thông qua cùng một web trên. − Mỗi lần cần nội dung mới ở server giao diện thì phải chờ cho bộ hiển thị SVG xây dựng xong hình ảnh trong tập tin .svg được trả về.
Mô t ả chi tiết server
Server con này sẽ truy vấn trên cơ sở dữ liệu (CSDL) trong Microsoft SQL Server để lấy thông tin cần thiết cho việc tìm đường. Khi này WFS không bao giờ được phép yêu cầu thêm bất cứ tham số phụ nào để bổ sung vào cuối dòng URL nhằm mục đích xây dựng một kết quả hợp lệ cho yêu cầu tác vụ.
Tập tin GML Bản đồ ASPX
Nếu một WFS cài đặt “Xlink traversal” (tạm dịch là bộ phân tích liên kết), thì một WFS client có thể dùng thuộc tính traverseXlinkDepth và traverseXlinkExpiry để yêu cầu các thành phần được định danh bằng một liên kết. Hơn thế nữa, một lượng lớn các giải pháp có thể được cung cấp khi sử dụng CarbonTools: các ứng dụng desktop độc lập, các mở rộng phần mềm của phía thứ ba, các dịch vụ Web .Net và nhiều hơn thế nữa.
TỔNG KẾT
• Cấu trúc dữ liệu hình học − Cấu trúc dữ liệu hình học sử dụng một cấu trúc để cực tiểu hóa kích thước của các vật thể hình học và để xây dựng các vật thể hình học được khử răng cưa rất hiệu quả trên màn hình. • Cửa sổ trình duyệt được xem như là một phông nền, cho phép phủ các lớp thành phần hình ảnh và định vị tuyệt đối trên trang (nghĩa là hình ảnh sẽ xuất hiện với “mối quan hệ chặt chẽ giữa các thành phần trong nó” khi thể hiện ở bất kỳ kích thước nào; đồng thời ảnh được phép cuộn, nếu cần thiết, bên trong một cửa sổ trình duyệt tùy ý ).