轉自:
http://www.souzz.net/html/svg/1/33990.htmlW3C文檔:
http://www.w3.org/TR/SVG11/中文教程:
http://www.w3school.com.cn/svg/index.asp
SVG是一種采用XML來描述二維圖形的語言。SVG可以構造三種類型的圖形對象:矢量圖形、位圖圖象和文字。圖形對象可以被組化、樣式化、變形和重新組合,包括圖象嵌套、變形處理、剪輯路徑、Alpha蒙板、濾鏡特效和模板對象。
SVG圖形可以是動態的、可交互性的。動畫通過直接聲明(比如在SVG里嵌入SVG動畫元素)或通過腳本來進行定義或觸發。
SVG通過使用腳本語言來完成比較復雜的應用,腳本語言調用SVG對象模型(SVG Document Object Model)來訪問或控制所有的元素、屬性和屬性值。事件處理器如onmouseover、onclick等可以應用到SVG圖形對象上,由于SVG和其它Web標準完全兼容和同步,如XML,CSS2,XSLT,DOM2,SMIL,XLINK,HTML等。因此,在同一Web頁面上,有些特性,如腳本編程等,可以同時應用在XHTML和SVG元素上。
SVG不但可以表現圖象,還可以表現文字、音頻等其它信息,對于那些有視覺障礙的人,可以通過可替換的方法把圖象替換為音頻信息,這樣對那些有視覺障礙的人,也能夠得到SVG所表現的信息。另外,對那些手持設備、車載設備、無線設備來說,它們的屏幕一般都比較小,而且顯示分辨率低,SVG的矢量特性也可以讓這些設備清楚地瀏覽SVG圖象信息,這都是目前的位圖圖象所不能做到的。
SVG是可升級矢量圖形(Scalable Vector Graphics)的簡稱。
可升級(Scalable)意味著統一地增加或減少。對圖象來說,可升級意味著圖象尺寸并不限定固定的大小,對互連網(Web)來說,可升級意味著一個特殊的技術,它能夠增加文件數量、用戶數量和應用的種類。SVG作為Web上的一個技術之一,可升級含有這兩方面的意思。
SVG圖象可升級到不同的顯示的分辨率,例如:相同尺寸的SVG圖象,打印輸出使用高分辨率,而在屏幕顯示時可以使用不同的分辨率。同一個SVG圖象能夠以不同的尺寸放到同一頁面上,也可以被不同的其它頁面所使用。我們可以放大一個SVG圖象,來了解其精美的細節信息。
SVG是可升級的,原因還在于:同一段SVG內容,既可以是獨立的圖象,也可以被引用到一個頁面,也可以嵌入到另外的SVG圖象中。因此,一個復雜的SVG圖象可以有多部分組成,也可以由多人共同完成。符號、標記、字體能夠重復利用圖形的某些組成部分,這樣可以充分利用HTTP的緩存優勢。
矢量圖象包含有諸如直線和曲線等幾何對象。這相對于以象素保存信息的位圖格式的圖象(如PNG、JPEG)來說有更大的靈活性。矢量格式圖象的最大好處就是,它可以和位圖圖象集成在一起,也可以把他們和矢量信息結合在一起以產生更加完美的圖象。SVG也不例外。
由于所有的顯示器都是基于點陣的,位圖圖象和矢量圖象的差別就歸結為他們是在客戶端還是在服務器端進行圖象展現處理;SVG能夠控制圖象展現的過程,不致于出現粗糙或帶鋸齒的圖象。SVG還能夠提供客戶端的濾鏡效果。
大多數XML語法描繪的都是文字信息或原始數據,他們不能提供圖象的能力,SVG能夠提供豐富的、結構化的矢量和矢量與圖象混合的圖象信息。
XML是W3C的推薦標準,用于結構化的信息交換,已經得到廣泛的普及和應用。SVG是建立在此基礎上的,有很明顯的優勢,比如:廣泛的國際化基礎,強大的結構化能力,以及對象模型等。
樣式單能夠很好地控制文字的外在表現方式,它的靈活性、快速下載和易于維護的特性早已被人們接受,SVG把這種技術擴展到了圖象世界中。腳本編程、DOM對象和CSS樣式單的組合常被人們稱作Dynamic HTML,廣泛應用在動畫制作、交互性和外在的表現效果中,SVG也可以借助腳本語言進行操縱文檔對象和樣式單。
使用XML,可以很方便地建立模型。對文本格式的語法來說,模型通常是建立在段落級和短語級,而不是在獨立的名詞、副詞或者是音素上。SVG是在圖形對象級建立圖象模型而不是獨立的許多點。
SVG提供了一個通用的path元素,可以用來創建各種類型的圖形對象,但同時也提供了一些基本的形狀元素如矩形和橢圓等,這些基本形狀對編寫代碼是非常方便的,也可以應用在復雜的路徑描繪中。SVG提供對坐標系統的精確控制,圖象對象的定義和變換都是在這個坐標系統之中。
SVG中的符號
SVG也能夠提供一些象電子、繪畫和流程圖等使用的標準符號,但目前的版本并沒有提供這些。SVG允許用戶創建和共享他們的符號庫,設計者能夠清楚地知道他們使用的符號的外在表現,而不必擔心那些不支持的符號。符號也可以以不同的尺寸和角度使用,也可以為了達到與其他的圖形對象相互組合而進行重新定義樣式。
SVG的展現效果
許多Web中使用的圖象都是依靠圖形工具包來創建模糊、陰影、光線等效果的,要在客戶端展現這些效果是不可思義的。SVG可以單獨地或以組合的方式對濾鏡效果進行描述,這些效果可以用在客戶端,當SVG圖象展現的時候展現這些效果,而圖象仍可以以圖象的分辨率的進行縮放和顯示。
SVG的文字
豐富的圖形效果有時候會在很大程度上依賴于所使用的特定的文字和文字間距。大多數情況下,圖象設計者為了防止圖象上的被別人替換,往往會把文字轉換成圖象,原來的文字也就變成了不可搜索和訪問的了。SVG的標準制定者在聽取了設計者們的意見后,在SVG中保留了文字元素,這樣,文字和圖象都被分別進行展現。
SVG的動畫
動畫可以通過腳本語言操縱文檔中元素來實現,但腳本的編輯和交換通常很麻煩。SVG和SYMM工作組經過集思廣益,共同在SVG中定義了動畫元素,這樣,在網頁圖形中常用的動畫效果就可以在SVG中使用。