什么是SVG
SVG，是可任意放縮矢量圖像格式（Scalable Vector Graphics）的簡稱。它基于XML(可擴(kuò)展標(biāo)識語言），是一個全新的標(biāo)準(zhǔn)開放的矢量圖像和動畫格式。SVG不同于傳統(tǒng)的二元（平面）圖像和動畫制作，它使用簡單的一元（文本）語句,完成矢量圖像，以及諸如色彩變化,對象運(yùn)動,濾鏡和遮照，音效添加等各式動畫效果。SVG創(chuàng)造一個利用純文本完成網(wǎng)絡(luò)多媒體的神話。
SVG的特點(diǎn)
矢量圖像
圖像通常分為矢量圖像和位圖圖像。
矢量圖像利用點(diǎn)和線等矢量化的數(shù)據(jù)描述圖像，并在圖形中包含色彩和位置信息。矢量圖像的最大優(yōu)點(diǎn)是"分辨率獨(dú)立"。當(dāng)顯示或輸出圖像時，圖像的品質(zhì)不受設(shè)備的分辨率影響，能夠提供高清晰的畫面。矢量圖相對位圖而言，更適合用于直接打印、印刷或輸出到一些小型設(shè)備如手提裝置上。放大和縮小矢量圖不會影響圖像品質(zhì)。
而位圖圖像則使用我們稱為像素的一格一格的小點(diǎn)來描述圖像。計算機(jī)的屏幕其實(shí)就是一張包含大量像素點(diǎn)的網(wǎng)格。位圖圖像受到分辨率的影響。因此常常出現(xiàn)圖像邊緣鋸齒和放大后"馬賽克"現(xiàn)象。相對而言，位圖需要的存儲空間要比矢量圖更多。
SVG作為矢量圖像格式，同樣具備了矢量圖的諸多優(yōu)點(diǎn)，更適合在網(wǎng)絡(luò)中傳輸和應(yīng)用。SVG除了矢量圖的優(yōu)勢，也同樣保持了對位圖圖像的正確表達(dá)功能。使用XML中的XLINK(擴(kuò)展鏈接）標(biāo)簽，SVG也可以在圖像中調(diào)用位圖圖像。
矢量濾鏡
雖然SVG圖像做為矢量圖格式，具有很多優(yōu)點(diǎn)。但我們也看到，仍然有很多的圖像設(shè)計師傾向于使用位圖創(chuàng)作。這是因?yàn)槲粓D常常可以使用大量的濾鏡效果、紋理貼圖和空間幻影等，加強(qiáng)圖像的視覺效果。
但因?yàn)槲粓D的創(chuàng)作是直接針對像素操作，所以，一旦完成效果的添加，設(shè)計師幾乎無法再進(jìn)行修改。例如，輸出一幅霧化效果的位圖圖像，您已經(jīng)無法再恢復(fù)原來清晰的圖像。
而如果使用SVG支持的矢量濾鏡，設(shè)計師同樣可以創(chuàng)作出大量流行的和普遍的濾鏡效果。并且，這樣的濾鏡效果是可調(diào)整的。因?yàn)?SPAN lang=EN-US>SVG的矢量濾鏡并不直接針對像素進(jìn)行操作，而是作為某一個對象的獨(dú)立屬性保存在文件中。修改圖像效果只需要重新調(diào)整這些屬性，就可以完成對濾鏡的修改、替換和刪除，非常的便捷。SVG的矢量濾鏡對于遠(yuǎn)程協(xié)作和二次編輯，提供了極大的自由度。
關(guān)于濾鏡的實(shí)例，請參看<<SVG中文教程>>。
基于XML
SVG的語法和結(jié)構(gòu)基于XML（可擴(kuò)展標(biāo)識語言）。XML是下一代的網(wǎng)絡(luò)開發(fā)語言，它提供的功能遠(yuǎn)遠(yuǎn)超過了目前使用的HTML（超文本鏈接語言）。當(dāng)一個網(wǎng)站變得越來越復(fù)雜的同時，為了獲得更好的管理和交互，網(wǎng)站開發(fā)者同樣需要一個比HTML更優(yōu)秀的網(wǎng)絡(luò)開發(fā)語言和工具。這就是XML。
與HTML不同，XML完全分離了網(wǎng)站內(nèi)容和網(wǎng)站構(gòu)架。通過定義結(jié)構(gòu)數(shù)據(jù)類型，用戶端應(yīng)用程序能夠顯示和處理，而不僅僅像HTML那樣僅僅能顯示，網(wǎng)頁或數(shù)據(jù)。例如，一個利用XML標(biāo)簽定義的電話號碼，可以根據(jù)需要，由瀏覽器進(jìn)行撥號。XML所具有優(yōu)秀的擴(kuò)展性，使得它在網(wǎng)絡(luò)工業(yè)應(yīng)用上，比HTML有著更大的空間和前景。
SVG的開發(fā)和創(chuàng)作是基于XML的，因此，我們也能在SVG中開發(fā)出更多新的功能以提供更多的網(wǎng)絡(luò)服務(wù)。例如，制作智能化的數(shù)據(jù)圖像。圖像中的數(shù)據(jù)可以根據(jù)需要，由應(yīng)用程序讀取、修改和統(tǒng)計并最終在圖像中顯示。這些應(yīng)用是目前HTML及相關(guān)圖像技術(shù)遠(yuǎn)不可及的。
文本格式
SVG文件是一元（文本）格式的。SVG圖像和動畫具有了以下文本格式所具備的特點(diǎn)：
1、作為基于文本的格式，SVG圖像中的文字也是文本格式。這不同于現(xiàn)在圖像和動畫中的文字。目前圖像和動畫中的文字實(shí)質(zhì)上都是圖像。因此，SVG中的文字可以被網(wǎng)絡(luò)搜索引擎做為關(guān)鍵詞搜尋。利用這一性質(zhì)，通過SVG中定義的文字，就可以制作出非常高效的圖像搜索引擎。圖像中的文字也可以被用戶瀏覽器查找。
2、SVG圖像可以方便的由程序語言來動態(tài)的生成。例如使用JavaScript,perl,Java等語言，開發(fā)自動圖像和動畫生成系統(tǒng)。這對于一些數(shù)據(jù)庫制表是非常實(shí)用的。在線圖像還可以根據(jù)后臺數(shù)據(jù)庫中的關(guān)系量實(shí)時的進(jìn)行動態(tài)改變。
3、SVG完全支持DOM(文檔物件模型)。因而SVG以及SVG中的對象可以通過腳本語言接受外部事件的驅(qū)動，例如鼠標(biāo)動作、鍵盤動作等，實(shí)現(xiàn)對自身或?qū)ζ渌锛D像的控制，制作交互式的圖像和動畫。
4、因?yàn)槭俏谋靖袷剑?SPAN lang=EN-US>SVG可以很好的跨平臺工作，同時，還可以解決相關(guān)的外部輸出、色彩模式、網(wǎng)絡(luò)帶寬等問題。
簡言之，文本格式使得SVG獲得了與其它技術(shù)標(biāo)準(zhǔn)更大的交互和融合的特點(diǎn)。
與GIF，JPEG比較
GIF，JPEG都是目前網(wǎng)絡(luò)普遍使用的位圖格式。SVG較GIF和JPEG有很多獨(dú)特的優(yōu)勢：
1、具有很高的圖像品質(zhì)。因?yàn)槭鞘噶繄D像，分辨率獨(dú)立，用戶可以自由的放縮圖像而不會破壞圖像的清晰度。這對于查看某些圖像細(xì)節(jié)例如數(shù)據(jù)圖像中的數(shù)字，非常的有用。
2、圖像中的文字獨(dú)立。如上一小節(jié)所述，SVG圖像中的文字獨(dú)立于圖像，可以進(jìn)行文本編輯和查詢。
3、較小文件尺寸。因?yàn)榛谑噶扛袷剑烧Z句完成圖像的保存，SVG圖像相比較GIF和JPEG具有更小的文件大小,下載更加迅速。
4、色彩適應(yīng)性更強(qiáng)。SVG圖像具有一個1600萬色彩的調(diào)色板,支持ICC（國際色彩協(xié)會)色彩標(biāo)準(zhǔn),支持RGB色彩模式。
5、可交互性。SVG基于XML，因而能輕易的制作強(qiáng)大的動態(tài)交互。SVG圖像能對用戶動作做出不同響應(yīng)，例如高亮,聲效,特效,動畫等，體現(xiàn)了網(wǎng)絡(luò)互動的本質(zhì)。而GIF，JPEG都不可以產(chǎn)生交互。
與SWF比較
SWF文件格式是Flash的輸出文件格式。從某種意義上，SWF與SVG有很多驚人的相似之處。但是，盡管Flash憑借其優(yōu)越的表現(xiàn)形式和便利的創(chuàng)作工具成為目前網(wǎng)絡(luò)動畫設(shè)計的首選，SWF日益在網(wǎng)絡(luò)中普及，但我們也應(yīng)該看到，與SVG相比較，SWF存在著以下的不足：
1、SWF是一個非開放標(biāo)準(zhǔn)。這就意味著該技術(shù)掌握在個體手中，技術(shù)的發(fā)展受到方方面面的限制。同時，SWF與其他的開放標(biāo)準(zhǔn)也沒有完整的融合方案。盡管SWF目前已經(jīng)提供了對XML的支持，但這種支持是單方面的。隨著XML及其他開放標(biāo)準(zhǔn)的發(fā)展，SWF的不協(xié)調(diào)性將日益顯著。
2、SWF的可編輯性不如SVG。SWF做為最終的動畫生成格式，其創(chuàng)作過程封裝在SWF文件中，幾乎無法再進(jìn)行二次編輯。同時，SWF也不提供對文本格式的支持，因此，無法獲得類似SVG的查詢圖像中文字的功能。
svg工具分析
SVG創(chuàng)作工具
目前的SVG創(chuàng)作工具還處于開發(fā)和研制階段,仍然沒有一款非常成熟的包含靜態(tài),動態(tài),交互功能創(chuàng)作的軟件.這里介紹幾個目前可以進(jìn)行一些研究和測試的SVG創(chuàng)作軟件.
Adobe Illustator
Adobe在SVG的開發(fā)中扮演了重要角色.Adobe Illustrator 9.0是較早的一款結(jié)合SVG功能的矢量創(chuàng)作軟件.目前可以進(jìn)行靜態(tài)圖形的創(chuàng)作和部分交互功能的實(shí)現(xiàn).其交互功能需要手寫javascript腳本.
創(chuàng)作AI圖像后,選擇File->Export(文件->輸出),選擇文件類型SVG,在SVG Option面板中設(shè)置相關(guān)屬性,可以輸出SVG文件,關(guān)于屬性設(shè)置,請參看<<SVG中文教程>>.
Web Draw
WebDraw是Jasc Software按照W3C組織制定的SVG規(guī)范書開發(fā)的矢量圖像和動畫制作工具,專業(yè)應(yīng)用于SVG創(chuàng)作.WebDraw通過直接畫布拖拽繪圖以及濾鏡效果模塊化組合,可以避免手寫源代碼.同時提供源代碼視圖窗口,支持后續(xù)源代碼編輯和修改.
軟件的整體布局類似于目前許多的圖形創(chuàng)作軟件.與職業(yè)的矢量創(chuàng)作軟件Adobe Illustrator和Corel Draw相比較,Web Draw在功能上還不足以抗衡,但作為專業(yè)開發(fā)SVG的創(chuàng)作工具,也許可以預(yù)想,經(jīng)過一段時間的積累,它將成為下一個成功的Fireworks.(Fireworks成功的開發(fā)了PNG格式.)
最新版本是Preview Release 4.目前還不支持動態(tài)SVG效果.另外, 應(yīng)用濾鏡效果并不能在畫布真實(shí)表達(dá)輸出后的SVG圖像.
下載(4.45M):
http://www.jasc.com/webdraw.asp (國外)
http://www.2svg.com/ (國內(nèi))
Web Engine
IMS Web Engine (Interactive Multimedia System)是Virtural Mechanics開發(fā)的一款網(wǎng)頁創(chuàng)作軟件,主要應(yīng)用于創(chuàng)作靜態(tài)和動態(tài)的HTML,DHTML和SVG頁面.Web Engine是目前極少數(shù)不需要通過手寫代碼即可完成SVG動態(tài)交互創(chuàng)作的工具.它的精靈向?qū)Э梢院芸斓亩x簡單的交互動作.
Web Engine的界面比較粗曠,或者說不是很精細(xì),很多操作是雙擊對象彈出面板,調(diào)整選項(xiàng),這有點(diǎn)像當(dāng)時的Flash3.0和4.0.Web Engine有一個比較不足的地方,給設(shè)計者帶來很大的限制,就是沒有提供源代碼視圖,無法直接進(jìn)行源代碼的修改和編輯.
目前的版本是 Version 2 Beta.
下載(3.86M):
http://www.virtualmechanics.com/(國外)
http://www.2svg.com/ (國內(nèi))
市場分析
SVG的應(yīng)用價值
網(wǎng)絡(luò)發(fā)展的需要,與其他開放標(biāo)準(zhǔn)兼容
如同PNG作為W3C的位圖圖像工業(yè)標(biāo)準(zhǔn),SVG是網(wǎng)絡(luò)中解決矢量圖像的工業(yè)標(biāo)準(zhǔn).在SVG以前,除了Macromedia開發(fā)了SWF作為矢量的網(wǎng)絡(luò)文件格式,還沒有其他的矢量文件在網(wǎng)絡(luò)中應(yīng)用.因?yàn)槲粓D文件受到本身的很多局限,在圖形印刷和傳輸中,矢量文件有很大的應(yīng)用價值,所以,必定會有相應(yīng)的矢量標(biāo)準(zhǔn)得到開發(fā)和應(yīng)用,這就是SVG.
作為W3C的推薦格式,SVG與現(xiàn)有的其他開放標(biāo)準(zhǔn)有很好的兼容性.這些標(biāo)準(zhǔn)包括DOM1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTM等L.SVG與其他組織的標(biāo)準(zhǔn)化技術(shù)也能很好的協(xié)調(diào)一致，如ICC，URI，UNICODE，sRGB，ECMAScript/JavaScript，Java.
使用SVG并不意味著我們將從此放棄現(xiàn)在的網(wǎng)絡(luò)圖像技術(shù)如GIF，JPEG，SWF.相比較這些目前有普遍應(yīng)用的文件格式,SVG更適合網(wǎng)絡(luò)發(fā)展的需求,開發(fā)和應(yīng)用SVG意味著獲得一個更優(yōu)秀的工具和方法.
數(shù)據(jù)表格,圖像地圖
在應(yīng)用領(lǐng)域,SVG可以非常適宜的應(yīng)用在數(shù)據(jù)表格和圖像地圖中.在SVG的源文件中,通過變量可以很方便的控制需要的圖形生成.這就為網(wǎng)絡(luò)圖像數(shù)據(jù)表格提供了很大的應(yīng)用前景.一個簡單的例子,現(xiàn)有的asp可以方便的構(gòu)建動態(tài)數(shù)據(jù)網(wǎng)頁,利用SVG,則可以同樣方便的繪制動態(tài)數(shù)據(jù)圖像,例如數(shù)據(jù)分析中的柱狀圖和餅狀圖.
制作圖像地圖同樣是SVG的一大優(yōu)勢.由于SVG是矢量格式,圖像可以在任何顯示分辨率下獲得同樣的圖像效果,文件放大觀看時也不會有任何的品質(zhì)損失,因而可以完全可以制作這樣的圖像地圖,其中包含了一個城市所有的地理信息,文件可以根據(jù)觀看這不同的需要,對不同的地區(qū)進(jìn)行放大顯示,同時,每一個地理名詞又可以獨(dú)立的包含一段文字說明,或者包含相應(yīng)的地理數(shù)據(jù),但用戶需要時,可以通過點(diǎn)擊地理名詞獲得解釋說明.這樣的圖像地圖文件的文件大小也僅僅是K字節(jié)級別.
無線設(shè)備的需求
SVG另一個非常誘人的應(yīng)用前景就是開發(fā)無線設(shè)備的圖形和動畫.例如目前使用的手機(jī)產(chǎn)品,其圖像主要是WBMP.這種格式因?yàn)槭俏粓D文件,受到傳輸大小的限制,同時不提供彩色的色彩模式,所以顯得很呆板.而如果利用SVG,只要在無線設(shè)備中安裝一個文本解析器,就可以實(shí)現(xiàn)對SVG文件的識別和顯示,同時,因?yàn)槭鞘噶康奈谋疚募?SPAN lang=EN-US>,文件的尺寸不會很大,非常適合無線產(chǎn)品的網(wǎng)絡(luò)傳輸.SVG還提供動畫和多媒體編輯功能,所以可以支持二維的平面動畫,支持聲音文件和視頻文件的播放.結(jié)合一些其他的技術(shù),例如SMIL(多媒體同步整合語言),就可以實(shí)現(xiàn)創(chuàng)建一個非常理想的多媒體無線終端解決方案.
圖像搜索引擎
不同于現(xiàn)在的二維圖像,SVG是一個可實(shí)現(xiàn)交互和查詢的文件格式.在SVG圖像中,信息是一元代碼形式的,是開放形式的.文字獨(dú)立于圖形信息.這就為圖像搜索和查詢提供了可能.例如,在一個SVG動畫中,通過搜索某一個關(guān)鍵字,就可以在圖像中查詢到對應(yīng)的信息.而這對于同樣是矢量圖像和動畫格式的SWF就不可能實(shí)現(xiàn).依據(jù)SVG的這種交互性,可以創(chuàng)建大型的圖像搜索引擎.
網(wǎng)頁設(shè)計思想的改變
采用SVG進(jìn)行網(wǎng)頁設(shè)計,是下一代的網(wǎng)頁設(shè)計思想.現(xiàn)在的網(wǎng)頁設(shè)計,通常是在位圖圖像軟件中繪制好整體頁面圖像,然后進(jìn)行圖像切割,最后完成頁面的文字編輯.通常這樣的工作是很繁瑣的,進(jìn)行二次修改也很不簡便.而利用SVG,則可以實(shí)現(xiàn)頁面圖形設(shè)計和文字編輯的一步完成.如果要進(jìn)行遠(yuǎn)程協(xié)作完成網(wǎng)頁設(shè)計,也只需要傳輸創(chuàng)作后的頁面文件,而不必將所有的圖像源文件和頁面文件都傳輸.
因?yàn)?SPAN lang=EN-US>SVG能夠很好的與HTML和XML兼容,所以,下一代的網(wǎng)頁編輯軟件將開始結(jié)合圖像創(chuàng)作功能.許多現(xiàn)在需要通過外部圖像或動畫軟件創(chuàng)作的效果,將可以直接在網(wǎng)頁編輯軟件中完成.
結(jié)合SVG創(chuàng)作網(wǎng)頁,將使網(wǎng)頁設(shè)計師真正可以"畫"出頁面.
另外，有一些專業(yè)的計算機(jī)軟件公司開發(fā)基于web的圖形化軟件，看到了svg的優(yōu)勢和前景。但是苦于沒有一個好的創(chuàng)作工具而放棄。這是一個大的市場，筆者一直想開發(fā)一個用于軟件公司的產(chǎn)品。
這個工具一旦誕生，將是世界首家。市場非常廣闊。
產(chǎn)品目標(biāo)定義
產(chǎn)品的目標(biāo)除了吸收目前市場上產(chǎn)品的優(yōu)點(diǎn)
可以用簡單的圖元進(jìn)行靜態(tài)svg的設(shè)計創(chuàng)建，同步源碼和展現(xiàn)預(yù)覽以外
增加新的目標(biāo)是。
1， java開發(fā)，跨平臺
2， 工具可以和數(shù)據(jù)庫交互
3， 可以定義事件
4， 增加組件庫
5， 提供api供其它java軟件項(xiàng)目調(diào)用
市場目標(biāo)定位
第一步：面向?qū)I(yè)的計算機(jī)公司
第二步：面向廣告公司及更大的客戶群
組件設(shè)計工具
可以通過簡單的圖元和已有組件進(jìn)行新的組件設(shè)計，但不涉及事件定義，只是簡單的靜態(tài)圖形文件的創(chuàng)建。
總體設(shè)計工具
可以通過簡單的圖元和已有組件進(jìn)行總體圖形的設(shè)計。可以進(jìn)行事件腳本設(shè)計，可以和后臺數(shù)據(jù)庫關(guān)聯(lián)。圖形屬性更加豐富。
java解析展現(xiàn)工具
可以在java app的Jpanel上解析展現(xiàn)svg文件。