向量三國誌-PGMLVML特別速報

B.K.

向量檔案,有人稱之為「上帝的檔案格式」,因應形而上的運算式而生,過去一直無法在瀏覽器中直接顯示,但是今年345月中三項奠基於SGMLXML的規格草案相繼提出後,下半年新的網頁向量圖形戰場隱然成形。

 

掀起網頁向量圖檔標準

  當大家眼光一直集中在頻寬的解決與瀏覽器的楚漢之爭時,網頁圖形檔案領域內,卻燃起一股肅殺氣氛,感覺上又像是小規模的瀏覽器兩強鬥爭,硝煙何起?只為網頁向量圖檔的標準誰屬。

  三月份Council for the Central Laboratory of the Research Councils (CCLRC)W3C提出Web Schematics規格時,並未引起媒體注意,但到了在四月中旬,Adobe公司向W3C提出PGML規格草案,打算以XML為基礎,將本身主要的向量繪圖軟體:Illustrator的檔案格式直接上網,作為網頁向量圖形的標準檔案格式,結盟的廠商包含NetscapeIBMSun Microsystem;而在五月下旬,以Microsoft為首的廠商又提出另一個規格草案:VMLVector Markup Language)、也以向量圖檔的網頁標準為目標,原本僅在點陣圖檔案最佳化議題上打轉,並昂首期盼頻寬早日解放的網頁圖形

  設計領域,頓時如同印巴兩邊的核彈互爆般激烈。在本篇文章中,筆者就以PGMLVML為主題,解析其間的差異,並說明究竟向量圖檔在網頁設計上將產生何種程度的好處與影響,接著對目前三家分立的專業向量繪圖軟體,其分別在網頁設計上的策略做一簡述。


幾乎同時出現的三個提案

  事實上一共有三個提案幾乎同時出現,不過第一個提案:Web Schematics並沒有在媒體上曝光,如果未上W3C的網站,於其它新聞站台中還真找不到這個詞;每個提案都必須解決如何將向量檔案以SGML來表現的問題,其中包含:

  1. 基本造型(矩形、圓形、橢圓、不規則形狀)等的表示方式。

  2. 不同字型於頁面上的呈現與品質控制。

  3. 由基本造型疊合而成的複合造型、物件複合時彼此間的顯示狀態(例如透明程度)。

  4. 造型物件的旋轉、縮放與形狀改變方式。

  5. 物件的絕對位置與相對位置,也就是座標系統的指定。

  6. 移動路徑與動畫的設定,以因應多媒體動態網頁的需求。

  過去的HTML對於向量物件無能為力,既使是CSS也僅在絕對位置與重疊層次方面下定義,所以必須重新建立一套新的標籤語系,XML就成為極重要的工具,以下即分析三種規格草案的差異,在此筆者不做過多的Tag語法描述,因為在標準競爭的開始,您會發現瞭解太多僅是徒花時間,除非您已經準備要進軍向量繪圖軟體的市場,否則僅要對於可以直接將向量圖檔上網的事實做好心理準備。


Web Schematics Graphic

  這是最早提出的第一個草案,由Council for the Central Laboratory of the Research Councils (CCLRC)983月份提出,它是一個在歐洲協助科學研究與專家諮詢的組織,所以可以看到Web Schematics提案有很濃的學術意味(能否在銅味濃厚的兩強中繼續生存?);其是由整合幾種主要的文書處理軟體中(例如FramemakerUnix中的troffLaTeX),對向量繪圖與圖表的製作功能作為架構基礎,再以SGMLCSS1.0等為其在網頁上直接表現的方式。

  由此規格草案中發現其動機僅是試圖將文件中的向量圖表尋找一個直接上網的解法,特別是對於學術論文或是報告等,而不是網頁設計上的問題,因此沒有其它企業或是著名軟體廠為其背書,野心與企圖均顯不足,在強調行銷手法的末世紀電腦氛圍,若其可以成為標準的話,筆者就要改行賣眼鏡了(因許多人眼鏡已跌破了)。


PGML

  第二個提案是PGMLPrecision Graphics Markup Language),由Adobe公司於98年四月中旬向W3C提出,主要為網頁上的向量圖檔建立一個標準,符合一般使用者所做的簡單向量圖形或是專業設計師的向量作品,並希望5.0版的瀏覽器均能支援,其基礎主要依據Adobe本身的PostScript頁面描述語言與PDF可攜式文件檔案,轉換為XML延伸標記語法,直接表現在頁面上,而不是內嵌的檔案,在這樣的運作方式下,頁面的表現、字型、圖形形狀與顏色等均可以進一步加以控制,

  這次Adobe找了Sun MicrosystemIBMNetscape等為結盟的伙伴,想把其在印前輸出領域居龍頭地位的PostScript也推向網頁上,因為不論是向量繪圖或是頁面排版等領域的主流軟體,均支援PostScript等作為輸出的主要方式,而PDF檔則已經廣泛用於互動式文件的製作,特別是其能完整保留頁面字型與編排的完整,直接於Acrobat瀏覽器中顯示,相信Adobe也看到紙張印刷市場逐步沒落與多媒體網頁傳播方式的日益興起,但是過去PostScriptPDF主要用於靜態顯示方面,缺乏動態的支援,而Adobe與其伙伴們在產品線上又沒有動畫製作軟體,再觀察所提出的草案中,對動畫方面的想法也僅以支援DOMDocument Object Model)的語句帶過,因此這一點相信會是其急於補足的地方。


VML

  最後於985月底提出來的VMLVector Markup Language)主要來自Microsoft,本來筆者也在猜為何Microsoft無動於衷,原來是另有利器。在VML的規格草案中提出一個大格局的向量物件表示方式,基礎也是XML,不過並不強調使用既有的影像模型(例如DirectX),而特別強調其與HTMLCSS的結構相似,並且容易解讀與直接徒手修正,也著重於與其它應用程式間的轉換,由規格草案中看到的是Microsoft已經定義出相當完整的<shape><group>結構,用來表現單一形狀、字型與複合物件,但是在互動與動畫方面均未提及。

  過去Microsoft本身即以DirectX系列作為其多媒體解決方案,一般用於Game開發上硬體加速方面,未來計畫將用於網頁的設計上,例如其中的DirectAnimation即可控制2D的向量圖形、3D圖形、聲音與視訊等,來產生網頁動畫與多媒體效果,而在向量圖形的使用上則有「Structured Graphics Control」這個東西,如圖一,所謂結構化,就是將基本的向量元件,包含直線、矩形、圓形與文字等組合起來,產生2D3D的圖形效果,並加上旋轉、縮放與填色等功能;在動畫製作上則有"Sequencer Control"作為事件與時間的控制,不過畢竟DirectX是對於程式設計師所開發的工具,而網頁設計則偏向於使用向量繪圖軟體的設計師。

PIC001.TIF (276088 bytes)

圖一

DirecX是Microsoft在多媒體上的解決方案,其中也包含其在網頁向量圖形上的想法:Structured Graphics(pic001.tif)

  不過如果您看到Microsoft所拉的伙伴,可能就會嗅出勝負了,一個是手握Freehand向量繪圖軟體與Flash向量動畫軟體的Macromedia;一個是工業設計AutoCAD的原廠Autodesk,其還包含3D Studio MAX3D繪圖與動畫製作軟體;另一個則是商業向量繪圖與流程圖製作的Visio,光是這三者涵蓋的範圍就遠超過Adobe本身,再加上HP等,無疑的各擁標準的兩大集團已經形成。


為何要讓向量圖檔上網?

  為什麼大家拼命要把向量檔案丟上網呢?說穿了還是頻寬問題。頻寬的惡夢,也是所有網頁設計師的惡夢,限制實在太多了,為了讓上站者看下去,圖要盡量減少、縮小、分割、壓縮、去色,最後,還要兼顧品質,在網頁上呈現妥協後的作品,也產生出一些特殊的軟體,例如友立的SmartSaver之類的,幫您做出圖檔減肥前與減肥後的比較,這在傳統印刷設計上可是難以見到的,在印刷品質要求第一的前提下,不論檔案多大,就有多大的儲存設備(MOJAZCDR...)與RAM進行支援。

  也因頻寬有限下,一般網頁設計時,除了網頁主圖會做的花俏點外,其餘的按鈕都力求簡化,但是討論到此問題就發生了,簡化的圖檔以向量方式繪製時,絕對比點陣圖為佳,而且直接以向量表示後,還會產生一些不同於目前網頁圖形的優勢:

1.圖形大小可以直接縮放

  不會因解析度不夠而破壞顯示與列印品質:由於向量圖檔是以運算式表示,縮放過程會重新運算,再以螢幕像素表示,所以解析度可以即時改變,如果是點陣圖直接放大後,會因解析度不足,由數個像素表現同一資料由產生鋸齒狀邊緣或是馬賽克效果。

2.檔案大幅縮小

  以利頻寬不足的網頁傳輸環境:在向量的環境下,一個線條與顏色簡單的大尺寸圖形,可以輕易用數K的大小來表示,但是對點陣圖而言,不論是GIF或是JPEG,均會因為尺寸大小而暴增資料量,在此我們使用CorelDRAW製作三種圖檔,再比較其大小,如圖二,您就會發覺到其天攮之別。

3.以文字搜尋圖檔

  在XML的基礎下,您可以直接在文書處理軟體中編輯圖檔,另一方面更可以運用搜尋引擎來找圖檔。

PIC002.TIF (135858 bytes)

圖二

向量圖檔可以縮到多小呢?如圖中以CoorelDRAW畫出的簡單造型(600*600),加上漸層填色,儲存為CDR檔時大小為15K,存成JPG檔則要44K,如果是BMP檔,則要1064K


向量與點陣的差異

  在傳統的電腦繪圖領域中,一直分為兩大派別,一為影像處理的點陣圖檔(Bitmaps)、另一為插畫與頁面設計的向量圖檔(Vector),前者多用來表現真實影像,實在因為自然界的造型與色階太複雜了,如圖三,所以只得用一個個小像素(Pixels)來堆積整個影像,並記錄顏色數值,整個影像的所有資料均包含於檔案中,這時候就需要好的顯示卡與RAM,例如您使用PhotoImpact 或是Photoshop等,就是進行這樣的工作;後者多用於簡單的形狀表現,直接以數值與運算式表現造型,將顯示的工作交給電腦運算執行,CPU的速度此時就可以飆現,例如在CorelDRAW或是I

llustrator等。

  舉個例子,例如您要看房子時,可以看現成的房屋模型,其尺寸縮小、表現精美、任何人都可以立即看懂,但是不能放大,因為很多小物件必然被簡化,另一個原因則是重量重與不方便攜帶(如同在網路上傳輸),但是建築師也可以用基地圖、平面圖與施工圖來表示,僅是一疊薄紙,重量輕、便於攜帶、但是一般人卻看不懂,不過如果造型太複雜時,可能就得數百張紙才能表示,這也是向量圖檔會因為造形的複雜度來決定檔案大小的特性。


PIC003.TIF (363571 bytes)

圖三


在同一個主題下,您可以明顯發現向量與點陣兩種不同的表現方式,在左邊的向量圖中,花是曲線外型與漸層填色的混合,而點陣的花,可以完全符合自然的狀況。(pic003.tif)

  雖然向量圖形一直在設計界中佔有重要地位,但是使用者卻有限(小畫家不算在內),一個原因是向量是一種由無到有的繪圖軟體,要做出一些作品還真要有訓練與天分,不像影像軟體可以將掃瞄後的照片作些處理與拼貼,一個作品很快就出現了;另一方面要熟練一套向量軟體非常不容易,特別是從繪製一個單純向量物件、填色後再進行堆疊,除非您真是學設計的,不然多數人僅是瞭解個大概後就放棄了,所以過去人人可做的網頁設計領域,還是以影像處理為主導,但是在網頁設計日趨主流與專業化後,許多傳統設計師也開始接觸這方面的案子,您也可以發現專業繪圖軟體中均加上支援網頁設計的新功能,但是向量繪圖界最缺乏的直接於瀏覽器中顯示的問題卻未獲得解決。

  向量圖檔可以用在哪些地方呢?例如常見的平面按鈕、立體按鈕、圖示、統計圖表、公司商標與標誌等,有些是本身即單純,有些則是遷就於頻寬問題而單純化的圖形,如果您仔細觀察網頁,或是曾製作過網頁,均會發現到這樣的圖形十分常用,而PGMLVMLXML表現於頁面後,更可直接與DHTMLCSS等規格結合,呈現完美的動態頁面設計。

  其實說到縮放與列印等功能,在網頁上的確有其需求,但是重要與否卻有爭議,不然瀏覽器都到了4.0版了,亦未直接支援任何形式的向量檔案,一方面是過去網頁中文字是主題,圖片為輔,而圖片又多是可以直接掃瞄進來的影像檔案,要一般人找個向量軟體畫出一個可以看的圖放在網上,並不容易,而縮放與列印等功能亦不常用,當然你可以說因為過去沒辦法如此做,當然也少人用,不過問題主要還是頻寬,在頻寬全面解放後,點陣圖在這些方面的限制也會獲得解決,因此向量圖也佔不到太多便宜,PGML說實話只是Adobe為取得向量環境下的霸主地位,所提出的草案罷了,因為基礎都是他自己掌握,當然其Illustrator必然會有最佳的網頁表現。


三分天下的專業向量繪圖領域

  接著談起專業向量繪圖的領域,除了以下三家外,您很難再聽到其它的名字,這三個軟體也紛紛邁入8.0新版本,歷經至少八年的艱苦奮鬥,相對也造成龐大的進入障礙,不過在網際網路盛行後,紙張印刷的需求逐步降低,很多設計師接的都已經變成網頁設計的案子,這時候才發現到原來手邊熟悉的向量繪圖軟體,竟然都要轉成點陣圖後才能在網頁上呈現出來,此狀況的改變也使生產軟體的廠商必須在發展策略上做極大的調整,以下分別說明。


加拿大
Corel公司的CorelDRAW

  在PC平台上的向量繪圖製作,CorelDRAW有最大的市場佔有率,基本上Corel公司對於PGML也抱著肯定的套度,反正其CorelDRAW也可以支援IllustratorAI檔、PDF檔與PostScript,所以有標準也未嘗不好,但是標準被Adobe 掌握後,某些PostScript不支援的獨門絕技,就必須依賴本身的網頁解決方案來支援,目前浮上抬面的就是Barista

  Barista是以HTMLJAVA語言為基礎來輸出文件,過去JAVA一出現即委身於頁面上的小動畫製作,而Corel公司則運用其跨平台特性,發展出新的頁面出版程式引擎,目前內建Barista輸出的軟體包含WordPerfectCorel Ventura等,而CorelDRAW也可以輸出成BaristaHTML檔案,但是圖形會轉成JPEG或是GIF檔。


美國
Adobe公司的Illustrator

  雖然IllustratorMAC平台上有極高的佔有率,但是Adobe一直把眼光放在向量插畫與出版印前市場中,因此在三大向量繪圖軟體中,Illustrator7.0版是對於網頁設計支援較差的一位,僅支援JPEG與動態GIF的製作輸出,還未提出直接上網的技術方案,或許這就是PGML出現的原因。


美國
MacromediaFreehandFlash

  Freehand本來是Aldus公司旗下的向量旗艦軟體,在轉賣給Macromedia公司後,立刻補足Macromedia公司在平面設計上的缺憾,全面向Windows MAC平台進擊。在網頁設計方面,Macromedia96年先推出了Shockwave for Freehand,直接將Freehand的向量檔案,透過其專有的Shockwave程式轉檔後,內嵌上網頁,具有256倍的畫面直接縮放(Zoom)能力,不過仍是受限於瀏覽器必須外掛程式的影響,未對網頁設計造成太大的衝擊。

  後來Macromedia又推出了Flash作為其在網頁向量圖形的動靜態解決方案,如圖四,具有極強的任意塑形(非節點)繪圖功能與Timeline動畫製作視窗,僅要以簡單的形狀改變方式,就可以製作出向量動畫,甚至加上聲音與簡單的互動按鈕效果,不過也還是處於內嵌於HTML中的檔案,限制了閱覽的方便性,雖然後來也推出了Aftershock,將Flash檔案轉成JAVA程式碼,避免外掛程式的需求,但是介於瀏覽器兩強的規格互不相讓下,表現仍不盡完美。

  之後推出的「Design in Motion」專案中,直接整合了Freehand 8Flash 2Insta.HTML 2等三個軟體,全面解決網頁上的向量動靜需求,例如先由Freehand完成靜態的設計,再將檔案匯入Flash中,完成變形並製成動畫,另外Insta HTML則可以將在Freehand中完成的頁面設計,輸出為所見即所得的HTML檔案。

PIC004.TIF (157385 bytes)

圖四

MacromediaShockrave網站中,您可以看到各式Flash向量動畫作品與Director的互動遊戲(pic004.tif)

  98年四月份Macromedia先把Flash的檔案開放出來,相信是因應AdobePGML,也充分展現其將Flash推向網頁標準檔案格式的企圖心。在五月份Flash 已經推出3.0版, 其中也提到了一個新產品:Flash Generator,我們姑且稱之為Flash動畫的產生器,它是Server端的程式,僅要先在Flash 3中建立一個範本(Template),就可以依據Server端所聯繫的資料庫中的資料改變,產生立即的動畫效果,適合用於統計圖表、廣告標誌、網頁導覽地圖等依據資料而變化頻繁的圖形表現方式,不過在PGML中,也可以
整合
DHTML產生同樣的效果。


整合向量與點陣圖檔

  標準的取得,已經變成軟體大廠奮鬥的主要目標,PGMLVML即是其中之一例,但是在XMLJAVA成為主流後,等於是說以瀏覽器為平台,自行定義瀏覽器的解讀能力,那麼是否符合所謂的標準,似乎不再是關鍵,關鍵可能會在於Client端程式的解讀能力,由此觀點,IE的市場佔有率不斷提昇,也似乎預告了勝敗,而檔案本身的特性與功能才更是重點,既使PGML或是VML成為標準,其它軟體廠也將繼續發展其它本身獨特的新功能,一方面增加競爭力,一方面吸引使用者,資訊軟體市場也就是在此開放與自由競爭的情況下,才會有飛快的進步,相信PGMLVML的提出,會將網頁設計的環境,更進一步與傳統繪圖環境融合,更加專業化,並導致繪圖軟體體質的改變,在同一軟體裡,直接整合向量與點陣圖檔,才能符合未來網頁設計的完整需求。

BACK.GIF (1245 bytes)HOME.GIF (1261 bytes)