SVG 動態圖像處理

背景

當 JavaScript 被 Netscape 公司發明出來時，它被用來做一些瑣細的事情，比如校驗表單、計算日期、提示用戶；隨着 Web 的迅速發展，這種輕巧而靈活的語言被委以越來越多的任務，動態地修改頁面內容，一致地處理事件，甚至無刷新地和服務器交互。然而，與傳統的客戶端編程相比，JavaScript 操作的對象限制在 DOM 模型之內，無法進行圖形編程。所以長久以來，我們在設計網頁時都僅僅是在“搭積木”，而且這些積木只有一種形狀——長方形。這些長方形的積木就是應用在 HTML 元素上的“盒子”模型（box model）。每個盒子有邊框（border），邊緣（margin）和填充（padding）。我們只能控制這些盒子的大小和有限的樣式。這些方塊的集合對於構建一個傳統的文檔頁面已經足夠了。但是 Web 的流行已經使網頁承擔的任務遠遠超出了傳遞文字信息。哪裏有流行，哪裏就有需求，哪裏也就有創新。網頁的美工設計已經使靜態頁面的美觀程度絲毫不遜色於傳統的客戶端程序的界面。而創造更加互動的用戶界面更是使在頁面上創建和修改圖片的可能十分吸引人。於是，兩種技術應運而生，使得 JavaScript 的功能擴展到圖形領域。

回頁首

數字化圖片的兩種方案

在介紹這兩種技術之前，我們先來看看圖片的數字化。將圖片存儲爲數據有兩種方案。其一爲位圖，也被稱爲光柵圖。即是以自然的光學的眼光將圖片看成在平面上密集排布的點的集合。每個點發出的光有獨立的頻率和強度，反映在視覺上，就是顏色和亮度。這些信息有不同的編碼方案，在互聯網上最常見的就是 RGB。根據需要，編碼後的信息可以有不同的位 (bit) 數——位深。位數越高，顏色越清晰，對比度越高；佔用的空間也越大。另一項決定位圖的精細度的是其中點的數量。一個位圖文件就是所有構成其的點的數據的集合，它的大小自然就等於點數乘以位深。位圖格式是一個龐大的家族，包括常見的 JPEG/JPG, GIF, TIFF, PNG, BMP。

第二種方案爲矢量圖。它用抽象的視角看待圖形，記錄其中展示的模式而不是各個點的原始數據。它將圖片看成各個“對象”的組合，用曲線記錄對象的輪廓，用某種顏色的模式描述對象內部的圖案（如用梯度描述漸變色）。比如一張留影，被看成各個人物和背景中各種景物的組合。這種更高級的視角，正是人類看世界時在意識裏的反映。矢量圖格式有 CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML 等等。

矢量圖中簡單的幾何圖形，只需要幾個特徵數值，就可以確定。比如三角形，只需要確定三個頂點的座標。圓只需要確定圓心的座標和半徑。描述它的函數已知的曲線也只需要幾個參數就能夠確定。如正弦曲線、各種螺線等等。如果用位圖記錄這些幾何圖案，則需要包含組成線條的各個像素的數據。除了大大節省空間，矢量圖還具有完美的伸縮性。因爲記錄的是圖形的特徵，圖形的尺寸任意變化時，都只是做着相似變換，不會出現模糊和失真。相反位圖的圖片放大到超出原有大小時，各個像素點之間出現空缺，即使用某種算法填充，也會出現模糊鋸齒等現象，不如矢量圖精確。因而矢量圖很適合用於記錄諸如符號、圖標等簡單的圖形。而位圖則適合於沒有明顯規律的、顏色豐富細膩的圖片。

回頁首

兩種技術

現在我們回到 Web 上的畫圖上。對應於圖片數字化的兩種方案，各有一種技術。我們按照它們產生的時間順序來說。這篇文章中，筆者會介紹第一種—— SVG。

回頁首

SVG

第一種技術來自 XML 家族，叫做 SVG(Scalabe Vetor Graphics) - 可縮放矢量圖。作爲一種通用的數據格式，XML 自誕生之日起，就不斷表現出表達一切可表達之物的抱負，不僅要接納新出現的各種信息，還要接收歷史上以其他各種形式存儲的數據。其擴張版圖的雄心，不亞於任何一位野心勃勃的君主。

XML 適合於描述結構化的數據，所以你可能猜到了，如它的名字所示，SVG 選擇的視角是矢量圖。實際上，SVG 遠不是第一種用 XML 描述圖片的格式，甚至也不是第一種在 Web 上提出的 XML 與矢量圖的組合的標準。在它之前的 1998 年，Macromedia 和 Microsoft 向 W3C 提交了 VML(Vector Markup Language)，Adobe 和 Sun 提交了 PGML(Precision Graphics Markup Language)，這兩種都是基於 XML 的矢量圖規範。隨後，不希望互聯網上的矢量圖片標準被這些巨頭壟斷的其他公司在 W3C 內成立了一個專門小組 SVG Working Group，在借鑑了前兩種提案後，提出了 SVG 規範，隨後被接納爲相當於標準的 W3C 推薦（W3C Recommendation）。以下是迄今爲止 SVG 的主要發展歷程：

2001-9SVG 1.0 成爲 W3C 推薦。

2003-1SVG 1.1 成爲 W3C 推薦。並演化出 SVG Tiny，SVG Basic 和 SVG Full 不同級別的細則。

SVG 1.2 在之後的幾年中一直處於工作草稿（W3C Working Draft）的狀態，現已確定會被 SVG 2.0 取代。

SVG 2.0 將會完全重寫 SVG 1.2，以加入更多諸如 CSS，HTML5 的新特性。

回頁首

第一個簡單的例子

下面是一個很簡單的矢量圖的定義。SVG 中各種元素和屬性的詳細說明可以在專門的參考中找到。本文中會在例子中對一些重要的元素和屬性做說明。

清單 1. 一個 SVG 文件

				 
 <?xml version="1.0" standalone="no"?> 
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > 
 <circle cx="100" cy="100" r="40" fill="red"/> 
 </svg>

第一行的 XML 指令定義版本，並說明此文件引用到其他文件。第二行是文檔類型定義，規定此 XML 中哪些是有效的 SVG 元素。這裏引用的 http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 正是第一行中 standalone 屬性爲 no 的原因。第三行開始是 SVG 的真正定義。circle 元素指定畫一個圓。cx、cy 和 r 屬性分別指定圓心的橫座標、縱座標和半徑。fill 屬性指定用紅色填充此圓內部的區域。

回頁首

畫圖比看圖容易

將這段“文本”粘貼進任何一個文本編輯器，然後將文件保存爲一個 SVG 文件，如 sun.svg。你就已經畫完了一幅圖——一個紅紅的太陽。但是想要看它卻不那麼容易。需要用一些專業的繪圖軟件，比如 Adobe Illustrator，CorelDRAW 和 GIMP 才能顯示這個圖片。你的電腦上已經有的 Windows 畫圖、ACDSee 都不支持這種格式。這是可以理解的，因爲 SVG 是作爲互聯網上圖片的一種標準。所以接下來看看怎樣在瀏覽器中顯示它——不幸的是，這仍然不像打開一幅 JPG 或者 GIF 那麼簡單。

各種瀏覽器對 SVG 的支持不一。總的說來，現在仍舊佔據最大市場份額的 IE 不支持，其他主流瀏覽器，包括現在市場份額第二的 Firefox 以及 Chrome、Safari 和 Opera 都對 SVG 標準有不同程度的支持。IE6、7、8 對 SVG 都沒有原生的支持，需要專門的插件（如 Adobe SVG Viewer）才能顯示。目前還處於技術預覽版的 IE9 將會支持。考慮到 IE 曾經佔據的壟斷性地位和微軟有自身的競爭性的 VML 技術，這種“落後”並不奇怪。

不過這種情況，在發展迅速的瀏覽器市場瞬息萬變。所以最好試試看您使用的瀏覽器支持下列哪種顯示方法。

使用 <img> 標籤。
<img src= 'sun.svg' >將 SVG 與傳統的互聯網圖片格式同等使用（現在只有 Chrome、Safari 和 Opera 支持）。
使用 <embed> 標籤。
<embed src="http://www.ibm.com/developerworks/cn/web/1107_pangjun_svgcanvas1/sun.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
pluginspage 屬性的值是 Adobe 公司爲不原生支持 SVG 的瀏覽器開發的插件 Adobe SVG Viewer 的安裝地址。2009 年 1 月 1 日 Adobe 已經終止對該產品的支持。

使用 <object> 標籤。

 <object data="sun.svg" width="300" height="100"
 type="image/svg+xml"
 codebase="http://www.adobe.com/svg/viewer/install/" />

使用 <iframe> 標籤。

 <iframe src="http://www.ibm.com/developerworks/cn/web/1107_pangjun_svgcanvas1/sun.svg" width="300" height="100" border="0" style="border-width:0"> 
 </iframe>

下面是一個測試瀏覽器對 html 中各種使用 SVG 的方式是否支持的頁面代碼。sun.svg 文件與該頁面保存於同一目錄。

清單 2. 測試瀏覽器對 SVG 的支持

				 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 <HTML> 
 <HEAD> 
  <TITLE> SVG in HTML </TITLE> 
 </HEAD> 

 <BODY> 
 1. 使用 &lt;img&gt; 標籤
 <br> 
 <img src="http://www.ibm.com/developerworks/cn/web/1107_pangjun_svgcanvas1/sun.svg" width="300" height="100"> 
 <br> 
 2. 使用 &lt;embed&gt; 標籤
 <br> 
 <embed src="http://www.ibm.com/developerworks/cn/web/1107_pangjun_svgcanvas1/sun.svg" width="300" height="100"
 type="image/svg+xml"
 pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
 <br> 
 3. 使用 &lt;object&gt; 標籤
 <br> 
 <object data="sun.svg" width="300" height="100"
 type="image/svg+xml"
 codebase="http://www.adobe.com/svg/viewer/install/" /> 
 <br> 
 4. 使用 &lt;iframe&gt; 標籤
 <br> 
 <iframe src="http://www.ibm.com/developerworks/cn/web/1107_pangjun_svgcanvas1/sun.svg" width="300" height="100" border="0" style="border-width:0"> 
 </iframe> 
 </BODY> 
 </HTML>

動態功能

如果僅僅是將 SVG 作爲圖片引用，則只發揮了它的靜態功能。我們更感興趣的是應用它的動態功能。SVG 的動態功能包括兩個方面。一爲動畫，二爲支持腳本編程。

回頁首

動畫

SVG 在設計時就加入了對動畫的支持。這是通過另一種 W3C 頒佈的動畫語言 SIML(Synchronized Multimedia Integration Language) 實現的。SIML 被應用時，與 SVG 結合得非常緊密。它與 SVG 一樣，是一種聲明性（declarative）的標記語言，通過元素（element）和屬性（attribute）來定義動畫的行爲。這裏只給出一個簡單的例子，不做詳細介紹。因爲瀏覽器對它的支持還很有限；另外它聲明性的本質也使表現力受到限制，不如使用腳本自定義動畫靈活。

清單 3. 用 SIML 實現的動畫

 <?xml version="1.0" standalone="no"?> 
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 <svg xmlns="http://www.w3.org/2000/svg"> 
    <polygon points="50,100  100,100  75,50" stroke="#660000" fill="#cc3333"> 
		 <animateTransform 
            attributeName="transform"
            begin="0s"
            dur="10s"
            type="rotate"
            from="0 0 0"
            to="360 60 60"
            repeatCount="indefinite" 
        /> 
	 </polygon> 
 </svg>

polygon 元素指定畫一個多變形，這裏給定了三個頂點，所以是一個三角形。將上面的代碼保存成一個 SVG 文件，在一個頁面中引用，如果您的瀏覽器支持 SIML，屏幕上會顯示一個不斷旋轉的紅色三角形；如果您的瀏覽器只支持 SVG，將看到一個靜止的紅色三角形。

回頁首

腳本可編程性

SVG 是一個 XML 文件，用於 XML 編程的兩種模型 DOM 和 SAX 也適用於它。因爲 SVG 是被設計用於互聯網，所以通過 JavaScript 和 DOM 訪問它就是最重要的應用模式。我們已經熟悉通過 JavaScript 和 DOM 動態地修改 HTML，同樣我們也可以在瀏覽器中動態地創建、修改和刪除圖片，這也將是本文之後在 SVG 方面的重點。

爲了演示這些動態功能，我們採取和上面不同的在頁面中使用 SVG 的方式——在 XHTML（XML 的 XML 版本）直接寫入 SVG 的源文本，而上面的四種方式 SVG 的定義都保存在和頁面不同的另一個文件中。這樣做有兩個原因。一是在支持 XHTML 和 SVG 在瀏覽器中，可以通過 JavaScript 直接訪問和修改 SVG。二是在互聯網的未來標準 HTML 5 中，SVG 就可以這樣直接在 HTML 中定義，就像其他 HTML 元素一樣。

之後的幾個例子都可以在 Firefox 中運行，但無法使用 IE。因爲要到版本 9，IE 纔會加入對 XHTML 的支持（目前的 IE 只支持將 XHTML 作爲 HTML 解釋），再次顯示了擁抱公開標準的遲緩。

我們的第一個例子是一個進度條。在 Firefox 中載入下面的 XHTML 頁面，會顯示一個綠色的運動的進度條。

圖 1. 進度條示例

清單 4. 進度條代碼

 <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title> 進度條 </title> 
        <script language='JavaScript'> 
            /* <![CDATA[ */ 
            function ProgressBar(info){ 
                var stem = {};// 此函數最後返回的代表進度條的對象。
                var done = 0, length, outline, bar;// 聲明內部變量。
                
                bar = document.getElementById('done');// 進度條中綠色的變化部分。
                length = 80; 
                
                // 重置進度到零。
                function reset(){ 
                    return to(0); 
                } 
                // 設置進度到某個值。
                function to(value){ 
                    if (value >= 100) { 
                        done = 100; 
                        bar.setAttribute('width', length); 
                    } 
                    else { 
                        done = value; 
                        bar.setAttribute('width', Math.round(done * length / 100)); 
                    } 
                    return stem; 
                } 
                // 進度變化某個值。
                function advance(step){ 
                    return to(done + step); 
                } 
                // 以下給進度條對象添加方法。
                // 獲得當前進度值。
                stem.getDone = function(){ 
                    return done 
                }; 
                stem.reset = reset; 
                stem.to = to; 
                stem.advance = advance; 
                return stem;// 返回可供腳本使用的進度條對象。
            } 
            // 測試進度條對象。
            function testBar(){ 
                var bar = ProgressBar(); 
                // 此內部函數每運行一次，增加進度值 1，直到進度值爲 100。
                function test(){ 
                    if (bar.getDone() === 100) { 
                        clearInterval(id); 
                    } 
                    else { 
                        bar.advance(1); 
                    } 
                } 
                // 每十分之一秒改變一次進度。
                var id = setInterval(test, 100); 
            } 
            // 頁面載入後開始測試。
            window.addEventListener('load', testBar, true); 
            /* ]]> */ 
        </script> 
    </head> 
    <body> 
        <div id='svgDiv'> 
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
            viewBox="0 0 100 100" style="border:1px solid; width:100px; height:100px; "> 
            <g id='progBar'> 
            <rect x='10' y='45' width='80' height='10' stroke='grey' fill='white'/> 
            <rect id='done' x='10' y='45' width='0' height='10' fill='green'/> 
                </g> 
            </svg> 
        </div> 
    </body> 
 </html>

對這個 XHTML 需要做一些說明。

<html xmlns="http://www.w3.org/1999/xhtml">XHTML 的根元素爲 html 元素，xmlns 屬性指定 XHTML 的命名空間。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="border:1px solid; width:100px; height:100px; ">在 XHTML 中直接插入 svg 元素，並指定命名空間等其他屬性。

viewBox 定義矢量圖可見的座標空間，四個數字依次是原點的 x 座標、y 座標、平面的寬度、高度。SVG 的座標空間符合計算機中指定屏幕空間的慣例，x 座標軸的正方向向右，y 座標軸的正方向向下。

style 屬性指定 svg 元素的各種外觀特性。SVG 與 HTML 一樣，可以應用 CSS 定義外觀，並且有一些專門的特性：

XHTML 中的 JavaScript 代碼被包含在 /* <![CDATA[ */ 和 /* ]]> */ 之間。
在 HTML 文件中不需要這樣做。因爲在 HTML 中 <script> 標籤內的 JavaScript 代碼被解釋爲 CDATA（Character Data，XML 中的一種類型，用於包含任意的字符數據）；而在 XHTML 中 <script> 標籤內的部分被解釋爲 PCDATA（Parsed Character Data，也是 XML 中的一種類型，爲字符數據和元素的混合內容），所以也要通過 XML 的語法檢查，而 JavaScript 代碼顯然不符合 XML 的標籤的定義語法。解決方法就是在代碼外人工加上 ![CDATA[ 和 ]]> 標註，使得 XML 的語法校驗器忽略這段內容。但是這樣會帶來第二個問題，有些瀏覽器不認識 CDATA 標註，因而這些代碼又無法通過 JavaScript 的語法檢查。所以我們在 CDATA 標註兩側再加上 JavaScript 的註釋標記。這樣 <script> 標籤內的代碼既能通過 XML 的語法檢查，又能被 JavaScript 引擎認識。
<svg> 標籤內有一個 <g> 標籤和兩個 <rect> 標籤。
g 元素用於分組。分組不僅可以使 SVG 的內容結構清晰，同一組內的對象還可以被集體操作。rect 元素代表一個矩形；x、y、width 和 height 屬性分別指定矩形左上頂點的橫座標、縱座標和矩形的寬度、長度；stroke 屬性指定圖形外框的線條顏色。我們用第一個空心的矩形顯示進度條的外框，第二個實心的綠色矩形顯示變化的進度。爲了在腳本中方便地訪問，我們設置了綠色矩形的 id 屬性。
代碼說明
在 JavaScript 腳本中我們用 DOM 先後獲得綠色矩形對象並修改它的寬度屬性。getElementById 和 setAttribute 的用法和在 HTML 中沒有兩樣。值得注意的是，有些我們在操作 HTML 時使用的方法，在 XML 中是不存在的，如根據名稱獲取元素的 getElementsByName。

這個例子中前三點特別的設定有些麻煩，不過這些在正在獲得越來越多支持並且很快將成爲互聯網的現實標準的 HTML 5 中都是不必要的。在 HTML 5 中不需要在 html 和 svg 元素中指定命名空間，svg 和其中的各種標籤會被自動識別。JavaScript 代碼也會和在現在的 HTML 頁面中一樣，不需要在兩側加上 CDATA 標註。

事件

SVG 中的元素同樣支持用戶界面的事件。因此我們可以通過鼠標、鍵盤觸發的各種事件改變 SVG 中的圖形。這就使得在整個頁面上可以進行豐富的圖形的互動，而不需要藉助於 Flash 插件。下面通過幾個例子來說明對事件的運用，使用的都是 DOM3 事件規範中定義的方法。

模擬控件

HTML 中的單選鈕、複選框、下拉列表等標準控件爲用戶輸入和顯示數據提供了各種友好的方式。過去我們只能“使用”它們，現在我們可以模擬甚至創造新的控件。我們先來模擬一個簡單的單選鈕的圖形和行爲。

圖 2. 模擬單選鈕

清單 5. 模擬的單選鈕 1 之代碼

 <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title> 模擬單選鈕 1</title> 
        <script language='JavaScript'> 
            /* <![CDATA[ */ 
            function mimicRadio(){ 
                var radName = 'pRadio', selectedId = 'pRadioSelected'; 
                var ns = 'http://www.w3.org/2000/svg';//SVG 元素的命名空間。
                var circles = document.getElementsByTagNameNS(ns, 'circle'); 
                var selected = document.getElementById(selectedId);// 用於模擬選中狀態的實心圓。
                var circle; 
                for (var i = 0; i < circles.length; i++) { 
                    circle = circles[i]; 
                    if (circle.getAttribute('name') === radName) { 
// 上面提到過，在 XML 的 DOM 中，沒有 getElementsByName 方法，所以我們需要手工檢查元素的 name 屬性。
// 爲 circle 元素添加鼠標響應。
// 通過設置實心圓的位置和 style 中的 display 值，模擬單選鈕被選中的行爲。
                        circle.addEventListener('click', function(){ 
                            selected.setAttribute('cx', this.getAttribute('cx')); 
                            selected.setAttribute('cy', this.getAttribute('cy')); 
                            selected.style.display = 'block'; 
                        }, true) 
                    } 
                } 
                
            } 
            
            window.addEventListener('load', mimicRadio, true); 
            /* ]]> */ 
        </script> 
    </head> 
    <body> 
        <div id='svgDiv'> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 120 100" 
style="border:1px solid; width:120px; height:100px; "> 
     <circle name='pRadio' cx="20" cy="50" r="6" stroke="black" 
     stroke-width='0.5' fill="white" /> 
     <text x='28' y='53'> 
     上升
     </text> 
     <circle name='pRadio' cx="70" cy="50" r="6" stroke="black" 
     stroke-width='0.5' fill="white"/> 
     <text x='78' y='53'> 
     下降
     </text> 
     <circle id='pRadioSelected' cx="20" cy="50" r="2" style='display:none;'/> 
            </svg> 
        </div> 
    </body> 
 </html>

代碼說明：
SVG

這裏共有三個 circle 元素，其中兩個作爲空的選項的圓圈，第三用於標記選中的狀態。circle 中控制大小和位置的幾項屬性我們之前都看過了。stroke-width 屬性用於控制圖形外框線條的寬度。name 屬性是我們自定義的，用於將一組單選鈕關聯在一起。

在 SVG 中嵌入文字需要使用 text 元素。x 和 y 屬性用於控制文字的位置，x 爲左端的座標，y 爲下端的座標。

當然，以上只是模擬了單選鈕響應鼠標點擊的外觀，真正的控件還必須包括讀和寫數據。爲此，我們將擴展上面的例子，提供一個可以單獨使用的“單選鈕”。

圖 3. 更完善的模擬的單選鈕

實現這樣一個單選鈕的代碼，因爲較長，附在參考資源中。代碼中有詳細的註釋。

最後，爲了展示 SVG 能創造的生動圖形應用的可能性，這裏給出一個更加複雜和有趣的例子。一個圓、兩個點和一段弧線構成的表情是互聯網上著名的符號。這個簡單的圖形不僅可以輕易被看成一張臉，而且通過改變弧線的形狀，還可以表現從笑臉到哭臉的不同表情。它顯示了人腦識別人臉的複雜行爲是以模塊和模糊的方式進行的，這種抽象的處理方式也爲展現 SVG 的功能提供了一個良好的場合。我們先畫出這樣一張高度簡化的臉，再創建一個滑動條控件，最後用拖動滑動條的方式來控制臉中弧線的彎曲程度和方向。如果把滑塊的高度解釋成象徵一個人的壓力，那麼我們就看到了隨着壓力的改變，人的表情是如何變化的。此代碼較長，可以在參考資源中下載。

圖 4. 一個更復雜的例子

回頁首

總結

本文介紹了一種用於互聯網的基於 XML 的矢量圖技術 SVG 的基本概念，並通過一些實例顯示了當與 JavaScript 結合時，這項技術的靈活性和廣泛的應用前景。

描述	名字	大小	下載方法
示例代碼	sample.zip	5KB	HTTP

關於下載方法的信息

參考資料

學習

SVG，維基百科上對 SVG 的介紹。
SVG Tutorial - SVG Examples，一個不錯的 SVG 教學網站。
Pike's SVG Tutorial，另一個不錯的 SVG 教學網站。
SVG Scripting Reference，MSDN 上非常詳細的 SVG 參考。
“面向瀏覽器的動態 SVG”（developerWorks，2006 年 10 月）：學習如何使用可縮放向量圖形（SVG）的動態性爲 Web 應用程序提供實用的交互效果。SVG 1.1 是一種描述二維向量圖形的 XML 語言，提供了實用、靈活的 XML 圖像格式。很多 SVG 特性具有動態效果，包括集成到 Web 瀏覽器中的特性。作者在上一期教程中介紹了 SVG 技術的基礎知識。
“利用 SVG 在 Web 應用程序中創建客戶端圖表交互”（developerWorks，2010 年 5 月）：SVG 的成熟推動當前未文檔化的可視元素的一種少見的使用和開發風格。在 “數據即服務” 盛行的現在，從外圍 Web 應用程序編寫 SVG 實例腳本變得非常重要。一個動態 choropleth 圖的特定示例演示了該技術有多麼容易掌握。
查看 HTML5 專題，瞭解更多和 HTML5 相關的知識和動向。
developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。
developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過 Web 2.0 新手入門欄目，迅速瞭解 Web 2.0 的相關概念。

討論

加入 developerWorks 中文社區。查看開發人員推動的博客、論壇、組和維基，並與其他 developerWorks 用戶交流。

關於作者

潘俊，自由撰稿人，具有豐富的各種客戶機/服務器平臺的應用開發經驗。

原文鏈接: http://www.ibm.com/developerwork...

SVG 動態圖像處理

電子科技大學計算機科學與技術就讀體驗

Golang爬蟲代理接入的技術與實踐

eclipse 導入工程歎號紅叉

關於三大框架的學習

SVG 動態圖像處理

WebSocket服務器端解決方案

jQuery圖表插件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結