[HTML5-SVG]SVG是什麼?SVG有什麼用途?
阿新 • • 發佈:2019-02-19
隨著網路上資訊資料的大量湧現,如何正確顯示和出版是有效傳輸、接收和利用它們的基礎。圖形、影象是資訊資料視覺化的主要方式。但現有的圖形、影象格式存在著缺陷:非開放式,顯示和印刷質量及適應性差,難以建立Web上圖文資訊的個性化定製、互動式以及實時動態方面的應用等。SVG正是在這樣的背景下誕生的。
SVG(Scalable Vector Graphics,可伸縮性向量圖形)是由全球資訊網聯盟(W3C)推出的基於XML編碼的開放式圖形、影象標準。它雖然是一種二維向量圖形格式,但其中可以包含向量圖形、光柵影象及文字等。這種新的圖形格式不但擁有Web向量圖形的固有特性,更是結合了XML及其相關技術的所有優越效能。
W3C的開源SVG已成為全球圖形技術的發展潮流,它將引領我們走向下一代網際網路,我們需要了解、學習並掌握這種圖形革新技術。
在 2003 年1月,SVG 1.1 被確立為 W3C 標準。參與定義 SVG 的組織有:Adobe、蘋果、Auto Desk、Bit Flash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微軟、Netscape、OASIS、Open Text、Quark、RAL(CCLRC)、Sun、Visio、施樂等,所以SVG不是一個私有格式,而是一個開放的標準。也就是說,它並不屬於任何個體的專利,而是一個通過協作、共同開發的工業標準。正是因為這點,才使得SVG能夠得到更迅速的開發和應用。
與其他影象格式相比,使用 SVG 的優勢在於:
· SVG 可被非常多的工具讀取和修改(比如記事本),支援多種濾鏡和特殊效果,在不改變影象內容的前提下可以實現點陣圖格式中類似文字陰影的效果,易於修改和編輯。
· SVG 與 JPEG 和 GIF 影象比起來,尺寸更小,且可壓縮性更強。
· SVG 是可伸縮的
· SVG 影象可在任何的解析度下被高質量地列印
· SVG 可在影象質量不下降的情況下被放大
· SVG可以方便的建立文字索引,從而實現基於內容的影象搜尋,影象中的文字是可選的,同時也是可搜尋的(很適合製作地圖)。
· SVG 可與現有技術可以互動融合。例如,SVG技術本身的動態部分(包括時序控制和動畫)就是基於SMIL標準。另外,SVG檔案還可嵌入JavaScript(嚴格的說應該是ECMA Script)指令碼來控制SVG物件,還可以與 Java 技術一起執行。
· SVG 檔案是純粹的 XML。為了保證網路影象能夠順利地和目前已經由W3C開發的 D0M1,DOM2,CSS,XML,X Pointer,XSLT,XSL,SMIL,HTML,XHTML技術,以及其他標準化技術,如 ICC,URI,UNICODE,RGB,ECMA Script/JavaScript,Java協調一致,SVG是完全基於x M L(Extensible Markup Language可擴充套件置標語言),並能和上述各項技術相融會的新一代的網路影象格式。SVG並非僅僅是一種影象格式,由於它是一種基於XML的語言,也就意味著它繼承了XML的跨平臺X和可擴充套件X,從而在圖形可重用X上邁出了一大步。如SVG可以內嵌於其他的XML文件中,而SVG文件中也可以嵌入其他的XML內容,各個不同的SVG圖形可以方便地組合,構成新的SVG圖形。
· SVG 圖形格式可以用來動態生成圖形。例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端使用者
可以說,SVG的出現帶來了一次技術革命。利用SVG能夠建立更加豐富多彩的資訊視覺化和互動性的應用,尤其是可以建立具有動態的、資料驅動的、互動式圖形、影象。另外,由於是純文字格式的.SVG比傳統的圖形、影象格式如GIF和JPEG佔用更少的空間。因此,SVG更加適合有線頻寬,並可提高下載速度。SVG和XML的開放式標準特性使其成為國際性語言。SVG標準得到了IBM、Adobe、Microsoft、Corel等幾十家大公司的支援,其最新的版本是SVG 1.2。
總之,SVG技術的出現,變革了在Web上圖文傳遞資訊的方式,並將產生一種更適於Web資訊釋出的工作流模式,其中包括Web資訊顯示和印刷出版的組織方式。
二、SVG要素
2.1 SVG的圖形物件使用XML,可以很方便地建立模型。對文字格式的語法來說,模型通常是建立在段落級和短語級,而不是在獨立的名詞、副詞或者是音素上。SVG是在圖形物件級建立影象模型而不是獨立的許多點。
SVG提供了一個通用的path元素,可以用來建立各種型別的圖形物件,但同時也提供了一些基本的形狀元素如矩形和橢圓等,這些基本形狀對編寫程式碼是非常方便的,也可以應用在複雜的路徑描繪中。SVG提供對座標系統的精確控制,影象物件的定義和變換都是在這個座標系統之中。
2.2 SVG的符號SVG也能夠提供一些像電子、繪畫和流程圖等使用的標準符號,但目前的版本並沒有提供這些。SVG允許使用者建立和共享他們的符號庫,設計者能夠清楚地知道他們使用的符號的外在表現,而不必擔心那些不支援的符號。符號也可以以不同的尺寸和角度使用,也可以為了達到與其他的圖形物件相互組合而進行重新定義樣式。
2.3 SVG的展現效果許多Web中使用的影象都是依靠圖形工具包來建立模糊、陰影、光線等效果的,要在客戶端展現這些效果是不可思議的。SVG可以單獨地或以組合的方式對濾鏡效果進行描述,這些效果可以用在客戶端,當SVG影象展現的時候展現這些效果,而影象仍可以以影象的解析度的進行縮放和顯示。
2.4 SVG的文字豐富的圖形效果有時候會在很大程度上依賴於所使用的特定的文字和文字間距。大多數情況下,影象設計者為了防止影象上的被別人替換,往往會把文字轉換成影象,原來的文字也就變成了不可搜尋和訪問的了。SVG的標準制定者在聽取了設計者們的意見後,在SVG中保留了文字元素,這樣,文字和影象都被分別進行展現。
2.5 SVG的動畫動畫可以通過指令碼語言操縱文件中元素來實現,但指令碼的編輯和交換通常很麻煩。SVG和SYMM工作組經過集思廣益,共同在SVG中定義了動畫元素,這樣,在網頁圖形中常用的動畫效果就可以在SVG中使用。
2.6 SVG的DOM SVG DOM基於DOM規範。DOM是訪問和維護XML文件的應用程式介面。它定義了文件的邏輯結構以及存取和維護文件的方法。在DOM的詳細說明中,“文件” 指的是廣泛意義的文件。現在XML可以把這樣的資料表示為文件,並由DOM管理。利用DOM可以建立文件,遍歷文件結構,還能增加、刪除、修改文件元素和內容。
SVG DOM遵循DOM1、DOM2規範的大部分內容,而且完全支援DOM2 Core規範,因此,SVG中的每個屬性和樣式都可以通過指令碼程式設計來訪問;另外,SVG也提供了一套擴充套件的DOM介面,通過指令碼程式設計實現動畫效果的手段更方便快捷。指令碼語言中的定時器可以很好地觸發和控制影象的運動。