可縮放矢量圖形(Scalable Vector Graphics，SVG)是W3C推出的基於XML的二維矢量圖形標準。SVG可以提供高質量的矢量圖形渲染，同時由於支持JavaScript和文檔對象模型，SVG圖形通常具有強大的互動能力。另一方面，SVG作為W3C所推薦的基於XML的開放標準，能夠與其他網路技術進行無縫集成。
基本介紹
- 中文名：可縮放矢量圖形
- 外文名：Scalable Vector Graphics
- 簡稱：SVG
- 本質：二維矢量圖形標準
簡介,優勢,檔案結構,SVG 繪圖技術,SVG坐標系,坐標變換,平移變換,旋轉變換,伸縮變換,歪斜變換,矩陣變換,
簡介
SVG是一種開放標準的矢量圖形語言，可設計激動人心的、高解析度的Web圖形頁面，因為軟體提供了製作複雜元素的工具，如漸變、嵌入字型、透明效果、動畫和濾鏡效果並且可使用平常的字型命令插人到HTML編碼中。2000年8月2日，W3C最終發布了SVG候選推薦標準，並希望開發者儘早開始實施SVG。2000年年底SVG推薦標準制定完畢。
SVG是一種新型的矢量圖形標準，同時它也是一種矢量圖形描述的一種標準的語言，這種語言具有非常強的開放性，所以其在套用的過程中主要的對象是網路。SVG在套用的過程中可以適應三種三種形式的圖像對象，各種圖像對象都可以在實際的工作中對對象進行全面的組合和處理，同時還能按照實際的需要更改其自身的形式，將其定義成預處理的對象。
優勢
SVG在套用的過程中也存在著十分明顯的優勢。首先它是基於一個普遍套用的標準，其次是這種技術所形成的圖像質量非常好。再次是其所形成的圖像並不是很大，所以對圖像進行保存和顯示都十分的便捷，在這一過程中所選取的檔案格式也具有非常強的靈活性，使用起來也非常的便捷。最後一點就是其在運行的過程中可以起到很好的互動作用，同時還能夠形成良好的動畫效果。SVG的基礎是純文字格式的XML，這樣一來也就直接的傳承了XML自身的特點，同時也使得不同系統之間的信息交流變得更加的容易，信息的儲存和讀取也變得更加的便捷，因此其在實際的工作中也具有非常強的可擴展性，此外它還可以對一些相對較為複雜的圖像進行詳細的描述，此外還可以將XML當做是數據運行的一個重要載體，這項技術在運行的過程中具備眾多的優點和優勢，也逐漸從青澀走向了成熟。
檔案結構
與HTML相類似，基於XML的SVG，語法和格式也是結構化的。所謂結構化，也就是檔案中的對象通過特定的無素標籤定義，任何無素都可以作為對象進行管理，檔案是框架式的。掌握基本的檔案框架，就可以閱讀、編輯和創作自己的檔案。
SVG使用一組組的元素標籤，創建和組織檔案以及檔案中的對象。每一個SVG檔案都包含最外層的<SVg></SVg>標籤。該標籤用於聲明SVG檔案的開始和結束。這等同於HTML檔案中的HTML檔案聲明標籤<Html></html>。
SVG主體中的語法和格式定義遵循XML標準，通過各類元素標籤和標籤對應的屬性來描述SVG對象。
SVG對象主要包括圖形，路徑和文本。
可以將SVG檔案嵌入到XML網頁或HTML網頁執行。
SVG檔案主要包括三個部分：
（1）標準的SVG元素信息。它通常就是指圖形本身的繪製信息，它可以有效的藉助SVG瀏覽器對圖形進行全面的瀏覽，這部分的信息對第三方系統建設和發展而言也具有非常強的可選擇性。在SVG當中，圖元對象的定義實際上就描述了一個新的圖元類型，圖元對象自身的類型也使得圖元的類型更加的真實可見，他們之間實際上存在著十分明顯的定義域引用的關係。
（2）模型信息。它是指圖形與描述對象之間的映射信息。
（3）私有屬性信息。用於將導出的圖形再次導入回源系統中，在圖形的互動過程中，若目標系統是第三方系統，則可以忽略這些私有信息。
SVG 繪圖技術
SVG 繪圖通過編寫代碼來實現，格式為XML，繪製出一個矢量圖像。所以，對於一個SVG格式的圖像，看到的最終形式是一個描述文本，相對比較容易讀懂，易於修改使用，可以通過描述內容的關鍵字來建立索引，像表示圖像的形狀元素；同時，SVG還可以使用一些特殊處理，這些都可以通過修改代 碼來實現，可以添加陰影，可以生成動態效果，這些都可以實現。
基於SVG構成一個矢量圖像時，我們使用的基本是各種形狀標籤，這些標籤元素包括根元素（svg），形狀元素；還有特殊效果處理中的濾鏡效果和漸變效果。
SVG提供了<circle>、<ellipse>、<line>、< polyline>、<reet>、<polygon>等6種基本的圖形元素和<path>路徑元素。可以對各種類型的幾何圖元進行描述。
在SVG中，線狀實體要素一般採用<polyline>元素或<path>元素來表示。在SVG 中，使用path元素的橢圓弧曲線命令A重新定義橢圓弧，使用path元素重新定義多邊形。
在SVG中使用分組元素<g>來表示基本重複單元，<g>元素可以嵌套使用來進一步表示圖元及子圖元，在<g>元素內可以定義任何可視化的基本幾何圖元元素。
填充範圍使用SVG的pattern元素來實現。
形狀元素：
矩形，用<rect>表示
圓形 用<circle>表示
橢圓，用<ellipse>表示
線， 用<line>表示
折線 ，用<polyline>表示
多邊形，用<polygon>表示
路徑，用<path>表示
SVG坐標系
無論對於什麼信息載體和載體設備而言，SVG檔案的繪畫區域總是抽象地定義為其圖像對象所渲染的空間。然而不同的載體其性質是極為不同的，光是顯示解析度一項就存在著巨大的差異。SVG檔案在處理這些問題上有著一定的規則。載體的尺寸雖不確定，但渲染的動作總是在此載體的一個確定的矩形中發生的，這個確定的矩形叫做“視口”(Viewport)。對於可視化的載體(如顯示器、列印紙等)，視口就是繪有SVG圖像的那部分表面。
視口的屬性與具體設備有關，所以在SVG的解釋程式渲染一個SVG圖像之前，先要通過與具體設備的互動通訊來確定視口的尺寸和參數，一般需要確定以下3個:以該設備的像素數所定義的視口的高度值、寬度值，還有一個像素所代表的具體尺寸如多少毫米等。只有這樣，SVG客戶端的解釋程式才能將一個SVG檔案轉換成具體設備上的圖像。
SVG客戶端的解釋程式獲得以上信息後，首先初始化視口，建立以像素為長度單位的視口坐標系，接著建立用戶坐標系以使兩者一致，也就是使用戶坐標系中的一個單位等於視口坐標系中的一個像素。
渲染SVG檔案時，如果SVG檔案中的長度值與坐標值等沒有規定單位，則預設地採用用戶坐標系的單位，也就是使用像素作度量標準。如果有特定的單位如mm、cm等，則滿要經過換算將尺寸轉換為用戶坐標值。這也是SVG客戶端解釋程式初始化時，需要第三個參數的原因。
SVG還有一個功能，即可以定義自己的坐標系。其方法是在一段SVG文本中定義一種叫做變換(Transformation)的格式，其含義類似於解析幾何中的坐標變換和映射規則。變換的格式中說明了此變換所作用的對象應該使用什麼方式進行平移、縮放、旋轉、歪斜等。變換提供了一種整體的方式，用它可對一個或一一組圖像對象進行變換，改變其比例、位置、形狀等，以達到使用自定義坐標系的目的。
坐標變換
SVG的坐標變換方式主要分為五種，包括平移變換，旋轉變換，伸縮變換， 歪斜變換，還有矩陣變換。
平移變換
平移變換的特點是變換後，新坐標系的坐標軸方向不改變，它的表達式為：transform="translate(x，y)"，這個表達式表示新得到的坐標系的原點平移到原來坐標系的點（x，y）。
旋轉變換
旋轉變換的關鍵是旋轉角度，它的表達式為：transform="rotate(anglex，y)"，其中有兩個關鍵值，一個是旋轉角度，用angle表示，分為正負值，其正值表示順時針旋轉，負值表示逆時針旋轉，單位是“度”；另一個關鍵值是旋轉中心的坐標（x，y），當中心坐標為0時，可以省略。
伸縮變換
伸縮變換顧名思義就是將圖像進行伸展和縮小，它的表達式為transform="scale(x，y)"，其中的關鍵值為變化的比例因子，當比例因子>1時表示圖像被拉伸變大了，當比例因子<1時表示圖像被縮小了，其中比例因子x表示x軸方向的，比例因子y表示y軸方向的。當做等比例縮小放大時，即x=y，這時，y可以省略不寫。
歪斜變換
歪斜變換的關鍵是歪斜的角度，它有兩種表達方式，一種為transform="skewX(x-angle)"是代表x軸上的變換，其中（x-angle）是沿x軸歪斜的角度，或者另一種為transform="skewY(y-angle)"，表示的是y軸的變化，所以（y-angle）是沿y軸歪斜的角度。
矩陣變換
矩陣變換的最大特點就是他有6個參數，所以，這種變換很靈活，對於特別複雜的變換，對於矩陣變換也只需進行一次運算就行了。它的表達式為：transform="matrix(abcdef)"。
