SVG(Scalable Vector Graphics)代表可升級矢量圖象，是新一代圖象格式的標準。它給Web開發人員提供了一種利用
XML(Extensible Markup Language)創建靜態圖像和動態圖像的方法，是圖象技術上的一次革命。利用此技術，Web開發人員對 頁面進行更加精確的控制，SVG的動畫片技術可以實現從簡單的直線運動到複雜的3D螺旋變形的控制.
SVG 有許多其他圖像方法所不具有的優點，下面就是其中一些：
1，和其它媒介兼容，比如無線設備等。
2，可升級的服務器端解決方案。
3，文件尺寸小，方便Web頁面下載。
4，無限的顏色和字體的選擇。
5，圖像可任意縮放。
6，可以用腳本控制與客戶的交互事件。
7，方便瀏覽器進行高清晰的打印。
8，可使用濾鏡效果。
9，基於文本的格式，可以輕鬆地和其它WEB技術集成。
10，內建的國際語言支持。
11，減少維護成本。
12，輕鬆升級。
13，廣泛的多媒體兼容性。
由於SVG和Flash有很多共同的特性，通常有人把它們放到一起進行比較，確實，兩者都和其它標準有很好的兼容性。事實上，SVG比Flash 有一些獨特的特性。SVG可以使用CSS（Cascading Style Sheets）、Script腳本和 DOM（Document Object Model ），是完全公開源代碼的技術，初學者完全可以從別人的現成的作品中進行學習。而Flash採用的是 獨有的專利技術，並不是完全開放的標準，當你在場景上單擊右鍵時，你看到的不是源代碼。
然而，由於某些原因，SVG還並沒有象Flash那樣流行，但隨着時間的推移，SVG也將很快流行起來的。Mozilla計劃完全支持SVG技 術，Microsoft也開始支持這種技術，（其實，IE6已經支持SVG。）Adobe GoLive5也宣佈支持SVG。此外，SVG編輯器也開始在 網絡上風行，Jasc的WebDraw已經可以以可視化的方式創建SVG格式的圖像了。Adobe 也有生成SVG格式圖象的插件。SVG的未來不但是光 明的，而且將會在不久的將來在Web領域扮演重要的角色。
目前，SVG的另一個不足之處就是，沒有一個瀏覽器完全支持它，要瀏覽SVG格式的圖像，需要安裝Adobe SVG插件（plug-in），但目前它也不能完全支持SVG的標準。另一個缺陷就是，SVG的在線資料太少，Web開發人員很難找到可參考的資料和素材。
下面。就讓我們來了解一下SVG的基本概念，SVG的特性是很多的，這裏不能全部羅列出來，我們只是先初步感受一下SVG能夠給Web開發人員帶來什麼.
什麼是SVG?
SVG是設計和編程之間的橋樑，與傳統的圖像製作方法不同，SVG圖像是由程序代碼生成的，這種語言是基於XML的，因此，它可以和W3C的其它標準無縫集成，比如DOM，CSS等。
爲了便於理解，我們可以把瀏覽器想象成一個空的畫布，上面定義了許許多多的X，Y的座標點，畫布上的每一個點，都可以通過數學計算公式創造出一個 形體。使用數學的術語可能會使人產生恐懼感，事實上，Web開發者在創建HTML頁面時一直在使用這樣的數學計算公式已經好長時間了，例如：一個CSS的 層，通過設定層的top（y座標點）和left（x座標點）屬性值，就可以定位它的位置，這就是利用數學公式來實現。SVG就是利用類似的原理來創建圖像 的。
SVG能夠顯示24位顏色的圖像，而圖像尺寸卻非常的小，圖像在放大或改變尺寸時不會有任何質量上的損失，更重要的是，SVG的每一個元素和元素的每一個屬性都能夠動態進行改變。這也是SVG最有競爭力的一面。
SVG的文檔結構
SVG可以有許多方式來組成Web文檔：可以以獨立的SVG頁面；可以嵌入到頁面中；也可以被一個帶名字空間的XHTML文檔使用，這一點就象XML文檔相似.下面先看看獨立的SVG頁面的例子：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300" x="0" y="0">
4. <!-- 這裏放置SVG的內容代碼 -->
5. </svg>
下面我們對上面的代碼做一個說明:
第一行：由於SVG是XML的一個應用分支，因此，它也必須符合XML的標準，必須包含XML的聲明<?xml version="1.0" standalone="no"?>
第二行：SVG必須遵循一定的標準或規則，這些標準或規則保存在一個被稱爲Document Type Declaration或DTD的獨立文件，來驗證SVG文檔結構的正確性，DTD精確描述SVG中允許使用的語言和語法規則。
第三行：<svg>標記告訴瀏覽器，這是一個SVG文檔，SVG文檔的作用範圍（或叫做SVG的畫布大小）用height和 width屬性來定義，如果不定義 width和height屬性的話，畫布的範圍將是整個瀏覽器，x，y屬性告訴瀏覽器將SVG畫布放到什麼位置，x屬 性與我們平常所用top屬性相同，指瀏覽器的top位置，y屬性等同於瀏覽器的left位置，當然，這裏也可以使用相對位置來定位，即百分比。
第四行：所有的SVG內容，都被放到<svg></svg>標記之間，
第五行：由於SVG是XML的一個應用，因此，必須有結束標記</svg>來結束文檔。
也可以把SVG嵌入到HTML或XHTML文件裏：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Object 和 Embed 測試</title>
</head>
<body>
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>
</body>
</html>
上面的文件是一個完完全全的HTML結構的文檔，最重要的標記是object和embed兩個，當然，這是對Internet Explorer 和Netscape兩種情況的，值得注意的是：object採用data屬性指明SVG文件的URL地址，而embed採用src屬性來指明SVG文件的 URL。
這種方法的優點就是：它可以把HTML和XHTML和SVG的長處結合在一起，例如：可以提高頁面被搜索引擎搜索到的機會，可以輕易地添加聲音或音樂，（Adobe plug-in支持mp3和wav文件）。
第3個方法就是：利用XML名字空間，這種方式是功能最強大，最具有靈活性，我們在以後的文章裏將詳細探討。
SVG 有許多其他圖像方法所不具有的優點，下面就是其中一些：
1，和其它媒介兼容，比如無線設備等。
2，可升級的服務器端解決方案。
3，文件尺寸小，方便Web頁面下載。
4，無限的顏色和字體的選擇。
5，圖像可任意縮放。
6，可以用腳本控制與客戶的交互事件。
7，方便瀏覽器進行高清晰的打印。
8，可使用濾鏡效果。
9，基於文本的格式，可以輕鬆地和其它WEB技術集成。
10，內建的國際語言支持。
11，減少維護成本。
12，輕鬆升級。
13，廣泛的多媒體兼容性。
由於SVG和Flash有很多共同的特性，通常有人把它們放到一起進行比較，確實，兩者都和其它標準有很好的兼容性。事實上，SVG比Flash 有一些獨特的特性。SVG可以使用CSS（Cascading Style Sheets）、Script腳本和 DOM（Document Object Model ），是完全公開源代碼的技術，初學者完全可以從別人的現成的作品中進行學習。而Flash採用的是 獨有的專利技術，並不是完全開放的標準，當你在場景上單擊右鍵時，你看到的不是源代碼。
然而，由於某些原因，SVG還並沒有象Flash那樣流行，但隨着時間的推移，SVG也將很快流行起來的。Mozilla計劃完全支持SVG技 術，Microsoft也開始支持這種技術，（其實，IE6已經支持SVG。）Adobe GoLive5也宣佈支持SVG。此外，SVG編輯器也開始在 網絡上風行，Jasc的WebDraw已經可以以可視化的方式創建SVG格式的圖像了。Adobe 也有生成SVG格式圖象的插件。SVG的未來不但是光 明的，而且將會在不久的將來在Web領域扮演重要的角色。
目前，SVG的另一個不足之處就是，沒有一個瀏覽器完全支持它，要瀏覽SVG格式的圖像，需要安裝Adobe SVG插件（plug-in），但目前它也不能完全支持SVG的標準。另一個缺陷就是，SVG的在線資料太少，Web開發人員很難找到可參考的資料和素材。
下面。就讓我們來了解一下SVG的基本概念，SVG的特性是很多的，這裏不能全部羅列出來，我們只是先初步感受一下SVG能夠給Web開發人員帶來什麼.
什麼是SVG?
SVG是設計和編程之間的橋樑，與傳統的圖像製作方法不同，SVG圖像是由程序代碼生成的，這種語言是基於XML的，因此，它可以和W3C的其它標準無縫集成，比如DOM，CSS等。
爲了便於理解，我們可以把瀏覽器想象成一個空的畫布，上面定義了許許多多的X，Y的座標點，畫布上的每一個點，都可以通過數學計算公式創造出一個 形體。使用數學的術語可能會使人產生恐懼感，事實上，Web開發者在創建HTML頁面時一直在使用這樣的數學計算公式已經好長時間了，例如：一個CSS的 層，通過設定層的top（y座標點）和left（x座標點）屬性值，就可以定位它的位置，這就是利用數學公式來實現。SVG就是利用類似的原理來創建圖像 的。
SVG能夠顯示24位顏色的圖像，而圖像尺寸卻非常的小，圖像在放大或改變尺寸時不會有任何質量上的損失，更重要的是，SVG的每一個元素和元素的每一個屬性都能夠動態進行改變。這也是SVG最有競爭力的一面。
SVG的文檔結構
SVG可以有許多方式來組成Web文檔：可以以獨立的SVG頁面；可以嵌入到頁面中；也可以被一個帶名字空間的XHTML文檔使用，這一點就象XML文檔相似.下面先看看獨立的SVG頁面的例子：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300" x="0" y="0">
4. <!-- 這裏放置SVG的內容代碼 -->
5. </svg>
下面我們對上面的代碼做一個說明:
第一行：由於SVG是XML的一個應用分支，因此，它也必須符合XML的標準，必須包含XML的聲明<?xml version="1.0" standalone="no"?>
第二行：SVG必須遵循一定的標準或規則，這些標準或規則保存在一個被稱爲Document Type Declaration或DTD的獨立文件，來驗證SVG文檔結構的正確性，DTD精確描述SVG中允許使用的語言和語法規則。
第三行：<svg>標記告訴瀏覽器，這是一個SVG文檔，SVG文檔的作用範圍（或叫做SVG的畫布大小）用height和 width屬性來定義，如果不定義 width和height屬性的話，畫布的範圍將是整個瀏覽器，x，y屬性告訴瀏覽器將SVG畫布放到什麼位置，x屬 性與我們平常所用top屬性相同，指瀏覽器的top位置，y屬性等同於瀏覽器的left位置，當然，這裏也可以使用相對位置來定位，即百分比。
第四行：所有的SVG內容，都被放到<svg></svg>標記之間，
第五行：由於SVG是XML的一個應用，因此，必須有結束標記</svg>來結束文檔。
也可以把SVG嵌入到HTML或XHTML文件裏：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Object 和 Embed 測試</title>
</head>
<body>
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>
</body>
</html>
上面的文件是一個完完全全的HTML結構的文檔，最重要的標記是object和embed兩個，當然，這是對Internet Explorer 和Netscape兩種情況的，值得注意的是：object採用data屬性指明SVG文件的URL地址，而embed採用src屬性來指明SVG文件的 URL。
這種方法的優點就是：它可以把HTML和XHTML和SVG的長處結合在一起，例如：可以提高頁面被搜索引擎搜索到的機會，可以輕易地添加聲音或音樂，（Adobe plug-in支持mp3和wav文件）。
第3個方法就是：利用XML名字空間，這種方式是功能最強大，最具有靈活性，我們在以後的文章裏將詳細探討。
